自制 checkbox复选框

CSS：
.checkbox {
display: none;
*display: inline-block;
}

.label:before {
content: "";
margin: 0 .5em 0 0;
float: left;
width: 1em;
height: 1em;
line-height: 1.1em;
text-align: center;
background: #fff;
border: 1px solid #222;
border-radius: 3px;
}
.checkbox:checked + .label:before {
content: "✓";
}

 

HTML:

<input class="checkbox" id="checkbox" type="checkbox"><label class="label" for="checkbox">漩涡</label>

 

IE6、IE7不支持，IE8不能选中，需要js实现

转自http://modernweb.com/2014/07/30/5-things-wont-believe-built-css/

转载于:https://www.cnblogs.com/damade/p/3896377.html