首页 > 代码库 > 自制 checkbox复选框

自制 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/