UI 状态选择器

2016-09-27 本文已影响17人 Simon_s

<!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>

UI 状态选择器

猜你喜欢

热点阅读