CSS优化单选多选按钮样式（2）
程序员文章站
2022-07-09 20:34:14
...
【前言】
本文简单介绍下如何优化自定义单选多选按钮的样式。
之前介绍过一种方法，利用伪元素添加选中后的√和圆点--content内填入css特殊字符表。
这两天学生做项目，将项目里遇到的特效简单讲解下。这里做下备注，课程大纲适当调整。
【主体】
因为特殊字符表在某些低版本浏览器展示容易出现问题，所以这里再介绍一种方案--->伪元素+画长方形+旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input[type="checkbox"]{
vertical-align: middle;
display: none;
}
input[type="checkbox"]+label{
display: inline-block;
width: 20px;
height: 20px;
border:1px solid rgba(0,0,0,0.3);
vertical-align: middle;
position: relative;
}
/*伪元素+特殊字符
input[type="checkbox"]:checked+label:after{
content: "\2713";
position: absolute;
top: 0;
left: 0;
color: white;
background: #1a71dd;
font-weight: bold;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
line-height: 20px;
}
*/
/*伪元素+画长方形+旋转*/
input[type="checkbox"]:checked+label:after{
content: "";
width: 12px;
height: 7px;
border:1px solid red;
border-color: transparent transparent red red;
position: absolute;
left: 47%;
top: 37%;
transform: translate(-50%,-50%) rotate(-58deg);
}
</style>
</head>
<body>
<input id="chinese" type="checkbox" name=""><label for="chinese"></label>语文
<input id="math" type="checkbox" name=""><label for="math"></label>数学
</body>
</html>
.
上一篇： 使用AST快速解决css代码重构问题
下一篇： CSS样式大全