CSS3学习笔记（九）——UI元素状态伪类选择器 :checked

通过“: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标签的样式

笔记整理出自：https://www.imooc.com/learn/33