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