我需要使用仅有的HTML和CSS创建自定义复选框。到目前为止,我已经写了:
HTML/CSS:
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
background: #fff;
border-radius: 5px;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "";
display: inline-block;
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-radius: 0px;
margin: 0px 15px 5px 5px;
}
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
checked
复选框应该是一个方框边框包围着的勾选标记,而不仅仅是一个勾选标记。 搜索答案时,我只发现了使用UTF-8字符或图像显示勾选标记的情况。 为了达到我想要的效果,我不能使用任何一种方法,只能使用纯CSS和HTML。有什么建议吗?
这里是codepen链接:http://codepen.io/alisontague/pen/EPXagW?editors=110