修改checkbox样式-1

说明

使用伪类来对复选框进行样式修改。以下以最简单的一个样式修改为实例进行说明。

步骤介绍：

1. 将一个label与复选框进行绑定，将两者放在同一个div下
2. 调整 label的外部样式使其作为复选框的外形
3. 调整 label::after，使其作为复选框的对勾样式
4. 绑定复选框的checked样式和 label::after ，使复选框被选择之后即可改变 label::after 样式
5. 隐藏复选框

编码以及说明

css

.checkbox{
    /*预先设定大div的样式*/
    width: 50px;
    margin: 20px 100px;
    position: relative;
}
.checkbox label{
    /*
    cursor属性设定鼠标的样式
    其他属性设定复选框外形
    */
    cursor: pointer;
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    background: #eee;
    border:1px solid #ddd;
}
.checkbox label:after{
    /*
    设定复选框对勾的样式，被选择之前的样式
    1. 设定长宽
    2. 透明背景，设置成对勾
    3. 旋转45度，并兼容各浏览器
    */
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);  /* Safari 和 Chrome */
    -moz-transform: rotate(-45deg);  /* Firefox */
    -o-transform: rotate(-45deg);  /* Opera */
    -ms-transform: rotate(-45deg);  /*IE9*/
    transform: rotate(-45deg);
}
.checkbox label:hover::after{
    /*  鼠标移动到label之后的样式改变  */
    opacity: 0.5;
}
.checkbox input[type="checkbox"]:checked + label:after{
    /*  绑定复选框的checked和 label::after */
    opacity: 1;
}
input[type=checkbox] {
    /*  隐藏复选框  */
    visibility: hidden;
}

html

<div class="checkbox">
    <input type="checkbox" value="1" id="checkboxInput" name="" />
    <label for="checkboxInput"></label>
</div>

参考链接

How To Style A Checkbox With CSS