复选框checkbox样式修改

该方法只兼容IE9及以上

将checkbox和label关联起来，

将checkbox隐藏掉，通过点击label来点击checkbox，label的样式即可自定义。

通过checkbox:checked + label:after来控制点击之后的符号

通常我们使用以下html结构，我们给复选框定义id#checkbox_a1，然后使用label的for属性与之关联，这样的话，用户点击label的时候，实际上就相当于点击了#checkbox_a1。

<input type="checkbox" id="checkbox_a1" class="chk_1" /> 
<label for="checkbox_a1">check</label> 

通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:after伪元素来制作各种效果，如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现，下面是一个简单的例子：

.chk_1 {

    display: none;

} 

.chk_1 + label {

    #FFF;

    border: 1px solid #C1CACA;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);

    padding: 9px;

    border-radius: 5px;

    display: inline-block;

    position: relative;

    margin-right: 30px;

}

.chk_1 + label:active {

    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

} 

.chk_1:checked + label {

    #ECF2F7;

    border: 1px solid #92A1AC;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);

    color: #243441;

} 

.chk_1:checked + label:after {

    content: '\2714'; //勾选符号

    position: absolute;

    top: 0px;

    left: 0px;

    color: #758794;

    width: 100%;

    text-align: center;

    font-size: 1.4em;

    padding: 1px 0 0 0;

    vertical-align: text-top;

}

巴特西

复选框checkbox样式修改

最新文章

热门文章