修改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