前端技术学习之选择器（十一）

十二，:checked选择器

在表单元素中，单选按钮和复选按钮都有选中和未选中状态。如果有做过尝试就知道，要设置这两个按钮默认样式是比较困难的。而在css3中，可以通过:checked选择器配合其他标签实现自定义样式。而:checked表示的是选中状态。

代码例子：

form {

border: 1px solid #ccc;

padding: 20px;

width: 300px;

margin: 30px auto;

}

.wrapper {

margin-bottom: 10px;

}

.box {

display: inline-block;

width: 30px;

height: 30px;

margin-right: 10px;

position: relative;

background: orange;

vertical-align: middle;

border-radius: 100%;

}

.box input {

opacity: 0;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 10;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/

}

.box span {

display: block;

width: 10px;

height: 10px;

border-radius: 100%;

position: absolute;

background: #fff;

top: 50%;

left: 50%;

margin: -5px 0  0 -5px;

z-index: 1;

}

input[type="radio"] + span {

opacity: 0;

}

input[type="radio"]:checked + span {

opacity: 1;

}

男

女

运行效果：