css中复选框样式 |css 颜色变深

原始复选框自定义样式1自定义样式2

上面的代码中，第一个是原始的复选框样式，第二个和第三个是自定义的样式。

自定义样式1的CSS代码如下：

.styled-checkbox{
width: 22px;
height: 22px;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.styled-checkbox:checked:before{
content: "\2714";
display: block;
position: absolute;
font-size: 18px;
color: #222;
top: 1px;
left: 4px;
}

上面的代码设置了复选框的大小、边框等样式，以及选择后显示的勾号。

自定义样式2的CSS代码如下：

.styled-checkbox2{
margin-right: 10px;
opacity: 0;
position: absolute;
pointer-events: none;
}
.styled-checkbox2+label{
position: relative;
padding-left: 35px;
cursor: pointer;
}
.styled-checkbox2+label:before{
content: "";
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 0;
left: 0;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.styled-checkbox2:checked+label:before{
background: #00bfff;
border-color: #00bfff;
}
.styled-checkbox2:checked+label:after{
content: "";
display: block;
position: absolute;
width: 3px;
height: 9px;
top: 5px;
left: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

上面的代码使用了label标签，将复选框样式和文字配合在一起。其中，复选框的样式通过:before和:after伪类实现，勾的样式通过transform属性旋转45度后画出。

以上介绍了两种常见的复选框样式，大家可以根据需要选择不同的样式进行设置。