2024年12月09日 建站教程
利用css中的伪类属性before和after改变checkbox复选框默认背景颜色和选中样式。
改变checkbox复选框默认背景颜色
input[type=checkbox] {
cursor: pointer;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
background-color: #fff;
color: #fff;
width: 14px;
height: 14px;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
border-radius: 2px;
box-sizing: border-box;
border: 1px solid #ddd;
}
改变checkbox复选框选中颜色
input[type=checkbox]:checked::after {
content: "";
background-color: #FF7D00;
border-color: #FF7D00;
background-color: #FF7D00;
}
input[type=checkbox]:checked::before {
content: '';
position: absolute;
top: 1px;
left: 5px;
width: 3px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
z-index: 1;
}
本文链接：http://so.lmcjl.com/news/19250/