自定义复选框样式

难题

CSS最初出现时，对表单元素的样式控制力有限。不过近年来，各种浏览器逐步放开CSS属性对变单控件的作用范围。从而设置大多数表单控件的样。
不过单选框和复选框不在此例，这两个控件绝大多数浏览器无法设置样式。

解决方案

通过label 标签的：before伪元素实现。

当<label>元素与复选框关联后，点击label标签同样能触发事件。

通过对伪元素的美化实现复选框。

1.HTML代码如下

<input id="checkbox1" type="checkbox" value="1"/>
<label for="checkbox1"> 测试 </label>

2.美化伪元素代码如下

input[type="checkbox"] + label::before{
    content: '\a0'; /* 不换行空格*/
    display:inline-block;
    vertical-align: -1px;
    width: 15px;
    height:15px;
    margin-right:5px;
    border-radius: 3px;
    background: silver;
    text-indent: 2px;
    line-height:16px;
}

显示效果如下

初始.jpeg

3.设置选中状态

input[type="checkbox"]:checked + label::before{
    content:'\2713';
    background: yellowgreen;
}

4.将复选框隐藏起来。不能设置 display:none ,会将它从tab键切换焦点的队列中删除。

代码如下

input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
}

5.设置获取焦点和禁用状态样式

input[type="checkbox"]:focus + label::before{
    box-shadow:0 0 2px 2px #58a;
}
input[type="checkbox"]:disabled + label::before{
    background: gray;
    box-shadow:none;
    color:#555;
}

这样就完成了checkbox的美化。
最终样式如下：

默认.jpg

选中.jpg

获取焦点.jpg

这样就完成了checkbox的美化。
可以通过类似的设置创建一个开关按钮。（checkbox隐藏,修改label样式）

html

<input id="switch" type="checkbox" class="switch">
<label for="switch">提交<label/>

CSS

<style>
    input[class="switch"] {
        position:absolute;
        clip: rect(0,0,0,0);
    }
    
    input[class="switch"]+ label {
        width:65px;
        display: inline-block;
        background:#ccc;
        background: linear-gradient(#ddd,#bbb);
        border: 1px solid rgba(0,0,0, 0.1);
        border-radius:5px;
        text-align: center;
        text-shadow: 0 1px 1px white
    }
    
    input[class="switch"]:checked+ label,
    input[class="switch"]:active+ label {
        box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset;
        border-color:rgba(0,0,0,0.4);
        background: #bbb;
    }
</style>

效果图：

switch.jpg

switch-click.jpg

自定义复选框样式

难题

解决方案

推荐阅读更多精彩内容