[分享]css3换复选框

CSS3换复选框

input[type="checkbox"]{
    display:none;
}
 
/*自定义复选框*/
label{
    display:inline-block;
    position:relative;
    padding-left:25px;
    margin-right:15px;
    margin-bottom:10px;
    cursor:pointer;
}
 
label:before{
    content:"";
    display:inline-block;
    width:16px;
    height:16px;
    border:1px solid #ccc;
    position:absolute;
    left:0;
    top:1px;
}
 
input[type="checkbox"]:checked + label:before{
    content:"2713";
    font-size:14px;
    color:#16a085;
    text-align:center;
    line-height:16px;
} 

介绍

在前端开发中，我们经常会使用到复选框控件，但是浏览器默认样式并不美观，所以我们可以使用CSS3来换复选框的样式，以达到更好的用户体验效果。下面我们来看一下如何使用CSS3来实现换复选框的效果吧！

实现思路

复选框控件通常由两部分组成：一个是标签，另一个是标签。我们通过CSS3来隐藏input标签，并通过label标签来实现复选框内的样式。 通过:before伪类来实现自定义的复选框样式，而当选择时，将:before的内容设置为“2713”(√)。此时复选框的样式已经被换掉了。

总结

通过CSS3换复选框的方法，我们可以轻松地美化复选框的样式，并提高用户体验。我们可以灵活地结合其他CSS属性，塑造出属于自己的复选框样式。