本篇教程介绍了HTML+CSS入门 如何设置 checkbox复选框控件的对勾√样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px*15px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。
html>
选中标签forcheck
.div-checkedlabel{
cursor:pointer;
position:relative;
display:inline-block;
width:150px;
height:38px;
border:1pxsolidgrey;
}
/**
*按钮透明
*@type{String}
*/
input[type="checkbox"]{
opacity:0;
}
/**
*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:1pxsolid#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:2pxsolid#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:bluetransparent;
border-width:0px0px30px30px;
border-style:solid;
position:absolute;
right:-1px;
top:10px;
opacity:1;
}
}
}
电子票
会议提醒
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
