转自:http://www.w3cplus/solution/css3content/images/html.png
———————来自小小小前端:Ping-k整理———————
使用场景:自定义复选框
.myCheck + label {
display: inline-block;
background-color: white;
border-radius: 2px;
border: 1px solid #d3d3d3;
width: 20px;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: center;
vertical-align: bottom;
}
.myCheck:checked + label {
background-color: #eee;
}
.myCheck:checked + label:after {
content: "\2714";
}
<label> <input type="checkbox" value="1" class="myCheck"> <label></label>测试 </label>
效果图:
更多推荐
CSS3中的content字符编码,content小的icon地址
发布评论