利用css3实现checkbox表单元素美化

html

<p>
    <input type="checkbox" id="default" class="checkbox">
    <label class="checkbox-label" for="default">同意 </label>
<p>

css

.checkbox{visibility: hidden;position: absolute;}
.checkbox-label{color:$geay4}
.checkbox-label:before{content:'○';color:#000;margin-right: 5px;position:relative;top:-1px;}
.checkbox[type=checkbox]:checked + .checkbox-label:before{content: '●';}

实现原理:
前端同学都知道点击带有for属性的label标签会选中对应的input复选框,这样一来我们可以先隐藏掉checkbox元素,然后利用label来定义样式,可以使用css3的 + 兄弟节点选择器选择选中后的label兄弟节点然后对其赋予样式即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>