.checkbox{
/* 清除默认样式 checkBox */
-webkit-appearance: none;
-moz-appearance: none;
}
点击是没有高亮效果的
.checkbox{
/* 清除默认样式 checkBox 谷歌与火狐的 */
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
width: 20px;
height: 20px;
background: #ffffff;
border: solid 1px #dddddd;
}
接着使用伪类 用边框充当钩子 旋转45度 再去掉两条边框
最后文字与单选框平行
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.checkbox{
/* 清除默认样式 checkBox 谷歌与火狐的 */
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
width: 20px;
height: 20px;
background: #ffffff;
border: solid 1px #dddddd;
border-radius: 50%;
position: relative;
transition: background 0.1s;
}
.checkbox:checked{
background: #62a7f8;
}
.checkbox:checked::after{
content: '';
height: 6px;
width: 10px;
border: #fff solid 2px;
position: absolute;
top: 3px;
left: 3px;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
label{
display: flex;
align-items: center;
}
</style>
</head>
<body>
<label for="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">
单选框
</label>
</body>
</html>
