通过“:checked”状态来自定义复选框效果
html
<form action="#"> <div class="wrapper"><div class="box"><input type="radio" checked="checked" id="boy" name="1"/><span></span></div><label for="boy">男</label></div><div class="wrapper"><div class="box"><input type="radio" id="girl" name="1"/><span></span></div><label for="girl">女</label></div></form>
css
form{margin-top: 100px;margin-left: 100px;}.wrapper{width: 500px;height: 30px;font-size: 18px;}label{float: left;margin-left: 10px;}.box{float: left;background: orange;position: relative;width: 25px;height: 25px;border-radius: 100%;}.box input{width: 100%;height: 100%;position:absolute;top:0;left: 0;/*必须设置位置，否则点击会出现不灵敏*/opacity: 0;z-index: 100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/}.box span{width: 10px;height: 10px;display: block;border-radius: 100%;position: absolute;top: 30%;left: 30%;z-index:1;background: white;}input[type="radio"]+span{opacity: 0;}input[type="radio"]:checked+span{opacity: 1;}
效果：
input[type="radio"]:checked+span：加号是相邻兄弟选择器的结合符，选择紧接在另一个元素后的元素，且两个元素必须拥有相同的父元素。比如这个选择的是type="radio"的input标签被选中时，后面紧跟的span标签。也就是改变的是这个span标签的样式
笔记整理出自：/learn/33
