css checkbox自动换行,CSS checkbox

CSS checkbox

Checkbox是一个HTML元素，用于接收用户的输入。复选框的样式很难设置，但是使用伪元素可以更轻松地设置复选框的样式。

每个网站中如果不设置checkbox样式，则它们看起来都很相似。对它们进行样式设计会让网站与众不同且更具吸引力。

通过使用一些插图可以清楚地显示复选框的样式。让我们来看一些相同的插图。

示例1

下面示例中，我们使用的是

〜同级组合器。它选择前一个选择器之后的所有元素。当用户将光标移到复选框上方时，我们还使用伪类

:hover设置了复选框的样式。

.container {

display: block;

position: relative;

padding-left: 35px;

margin-bottom: 20px;

cursor: pointer;

font-size: 25px;

}

/* 隐藏默认复选框 */

.container input {

visibility: hidden;

cursor: pointer;

}

/* 创建一个自定义复选框 */

.mark {

position: absolute;

top: 0;

left: 0;

height: 25px;

width: 25px;

background-color: lightgray;

}

.container:hover input ~ .mark {

background-color: gray;

}

.container input:checked ~ .mark {

background-color: blue;

}

/* 创建标记/指示符(未选中时隐藏) */

.mark:after {

content: "";

position: absolute;

display: none;

}

/* 选中时显示标记*/

.container input:checked ~ .mark:after {