css中有哪些复选的样式 |cssul设置

/* 去掉原生复选框的默认样式 */
input[type="checkbox"], input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
/* 使用背景图案来替代复选框的图标 */
input[type="checkbox"], input[type="radio"] {
background: url(checkbox.png) no-repeat center center;
background-size: contain;
padding-left: 22px;
}
/* 使用伪元素来创建复选框的图标 */
input[type="checkbox"], input[type="radio"] {
position: relative;
}
input[type="checkbox"]::before, input[type="radio"]::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
background: url(check.png) no-repeat center center;
background-size: contain;
}
/* 使用内置的单选框样式 */
input[type="checkbox"], input[type="radio"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
input[type="checkbox"], input[type="radio"] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
}

以上这些样式可以根据具体需要进行调整，用起来非常灵活，能够满足各种复选框和单选框的样式需求。