<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI状态选择器</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: black;
}
#box:hover{
background-color: chocolate;
}
#box:active{
background-color: aqua;
}
#box2{
margin-top: 100px;
}
/当输入框获取到焦点的时候应用此样式/
#box2 input:focus{
border: 1px solid red;
outline: none;
}
#box3{
margin-top: 100px;
}
/*禁用状态下的样式*/
#box3 input:disabled{
background-color: blue;
}
/*起用状态下的样式*/
#box3 input:enabled{
background-color: aqua;
}
#box4{
margin-top: 100px;
}
/*在输入框在只读状态下的样式*/
#box4 input:read-only{
background-color: pink;
}
/*在输入框可读可写状态下的样式*/
#box4 input:read-write{
background-color: coral;
}
#box5{
margin-top: 100px;
}
/*checked 表示选中状态下checkbox 的样式*/
#box5 input:checked + label{
color: transparent;
}
/*表示半选择状态下的样式*/
#box6 input:indeterminate + label{
color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box2">
<input type="text">
</div>
<div id="box3">
<input type="text" disabled="disabled">
<input type="text">
<div id="box4">
<input type="text" disabled="disabled">
<input type="text" >
</div>
<div id="box5">
<input type="checkbox">
<label>男</label>
<input type="checkbox">
<label>女</label>
</div>
<div id="box6">
<input type="checkbox">
<label for="">男女</label>
</div>
</div>
</body>
<script>
var checkBox = document.querySelector("#box6>input")
//半选择状态下 只能由JS来设置
checkBox.indeterminate = true;
</script>
</html>
