今天在学习css3时用:checked选择器实现自定义单选按钮效果,感觉这个选择器很棒,来记录一下。
:checked表示选中状态,可以配合其他标签实现自定义样式。
例如,想实现这个效果:
部分css代码如下:
.box input {
opacity: 0;
position: absolute;
top:0;
left:0;
}
.box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
input[type="checkbox"] + span {
opacity: 0;
}
input[type="checkbox"]:checked + span {
opacity: 1;
}
在这里,首先用span定义对号选中的样式;之后使用“+span”选中type类型为checkbox的input元素后面挨着的span标签元素;
最后,使用opacity: 0和opacity: 1实现未选中状态和选中状态(opacity: 0表示完全透明,opacity: 1便是完全不透明)。