<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 默认状态 */
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
width: 16px;
height: 16px;
border: 1px solid #00000026;
background-color: white;
line-height: 16px;
border-radius: 4px;
color: #fff;
text-align: center;
font-size: 14px;
box-sizing: border-box;
position: relative;;
}
/* 取消状态 */
input[type="checkbox"]:after {
width: 16px;
height: 16px;
line-height: 16px;
display: block;
content: "x";
color: transparent;
background-color: transparent;
}
/* 选中状态 */
input[type="checkbox"]:checked:after {
content: "✓";
color: #ffffff;
background-color: @primary-color;
border-radius: 4px;
position: absolute;
left: -1px;
top: -1px;
}
</style>
</head>
<body>
<div style="margin: 100px auto; width: 20%;">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
</div>
</body>
</html>
原生checkbox复选框的样式修改
于 2024-05-29 11:46:14 首次发布