html插入勾选框,HTML+CSS入门 如何设置 checkbox复选框控件的对勾√样式

本篇教程介绍了HTML+CSS入门 如何设置 checkbox复选框控件的对勾√样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px * 15px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。

html>

选中标签forcheck

.div-checked label {

cursor: pointer;

position: relative;

display: inline-block;

width: 150px;

height: 38px;

border: 1px solid grey;

}

/**

* 按钮透明

* @type {String}

*/

input[type="checkbox"] {

opacity: 0;

}

/**

* checkbox选中样式

* @type {String}

*/

input[type="checkbox"]:checked + i {

border-color: blue;

color: blue;

}

/**

* i标签的大小