css设置checkbox复选框控件的对勾√样式
效果
最终的样式，想要的效果:
我们要创建⽅框中的对勾，对于这⼀点，我们可以使⽤:after伪类创建⼀个新的元素，为了实现这个样式，我们可以创建⼀个5px * 15px的长⽅形并给他加上边框。这时候我们去掉上⾯和右边的边框之后，它会看起来像⼀个字母L。然后我们可以使⽤CSS的transform属性让它旋转⼀下，这样看起来就像是⼀个对勾。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选中标签forcheck</title>
</head>
<body>
<div class="div-checked">
<label>
<input type="checkbox" value="cbEticket">
<i>电⼦票</i><span></span>
</label>
<label>
<input type="checkbox" checked="" value="cbMeetingRemind">
<i>会议提醒</i><span></span>html input type属性
</label>
</div>
</body>
</html>
页⾯结构
.div-checked label {
cursor: pointer;
position: relative;
display: inline-block;
width: 150px;
height: 38px;
border: 1px solid grey;
}
/**
* 按钮透明
* @type {String}
*/
input[type="checkbox"] {
}
/**
* checkbox选中样式
* @type {String}
*/
input[type="checkbox"]:checked+i {
border-color: blue;
color: blue;
}
/**
* i标签的⼤⼩
*/
i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
/**
* 对勾√效果，使⽤border
* @type {[type]}
*/
span:after {
opacity: 1;
content: '';
position: absolute;
width: 5px;
height: 15px;
background: transparent;
top: 10px;
right: 5px;
border: 2px solid #fff;
border-top: none;
border-left: none;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}
/**
* 选中状态，span(三⾓形)样式
* @type {String}
*/
input[type="checkbox"]:checked+i+span {      width: 0px;
height: 0px;
border-color: blue transparent;
border-width: 0px 0px 30px 30px;
border-style: solid;
position: absolute;
right: -1px;
opacity: 1;    }
View Code