最近接手一个古老的项目，要修改里边的主题颜色，使用css的var方法一路轻松，最后在input的单选radio和多选checkbox被踩了刹车，也是有几年没做这种原始的项目手生了，最后经过几番折腾后，通过input的伪元素将其改造了，效果还不错在这里分享一下
未处理的样式
处理后的样式
主要代码部分
需要注意调整伪类:after和:before的尺寸和位置，根据项目的初始化样式调整, 主要适用于PC老项目
css
/* 主要代码部分 ----------------------------- Start */
/* ==================== 多选框 */
input[type=checkbox] {
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
vertical-align: middle;
margin-right: 4px;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: -2px;
content: " ";
background-color: #f4edfd;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
border: 1px solid #cccfd5;
}
/* checkbox选中样式 */
input[type=checkbox]:checked:after {
background-color: #9b23ea;
border-color: #9b23ea;
}
input[type=checkbox]:checked:before {
content: "✓";
display: block;
position: relative;
top: -5px;
left: 4px;
color: #fff;
font-weight: 900;
z-index: 1;
font-size: 14px;
}
/* ==================== 单选框 */
input[type=radio] {
font-size: 14px;
width: 14px;
height: 10px;
position: relative;
border-radius: 50%;
vertical-align: middle;
margin-right: 4px;
}
input[type=radio]:after {
position: absolute;
width: 8px;
height: 14px;
left: -1px;
top: -1px;
content: " ";
background-color: #f4edfd;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 50%;
border: 1px solid #cccfd5;
}
input[type=radio]:checked:after {
border-color: #9b23ea;
}
input[type=radio]:checked:before {
content: "";
display: block;
position: relative;
top: 2px;
left: 2px;
width: 8px;
height: 8px;
background-color: #9b23ea;
border-radius: 50%;
z-index: 1;
}
/* 主要代码部分 ----------------------------- Start */示例代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css设置input单选radio多选checkbox样式</title>
<style>
*{
padding: 0;
margin: 0;
}
.box {
width: 500px;
margin: 10% auto;
}
/* 主要代码部分 ----------------------------- Start */
/* ==================== 多选框 */
input[type=checkbox] {
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
vertical-align: middle;
margin-right: 4px;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: -2px;
content: " ";
background-color: #f4edfd;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
border: 1px solid #cccfd5;
}
/* checkbox选中样式 */
input[type=checkbox]:checked:after {
background-color: #9b23ea;
border-color: #9b23ea;
}
input[type=checkbox]:checked:before {
content: "✓";
display: block;
position: relative;
top: -5px;
left: 4px;
color: #fff;
font-weight: 900;
z-index: 1;
font-size: 14px;
}
/* ==================== 单选框 */
input[type=radio] {
font-size: 14px;
width: 14px;
height: 10px;
position: relative;
border-radius: 50%;
vertical-align: middle;
margin-right: 4px;
}
input[type=radio]:after {
position: absolute;
width: 8px;
height: 14px;
left: -1px;
top: -1px;
content: " ";
background-color: #f4edfd;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 50%;
border: 1px solid #cccfd5;
}
input[type=radio]:checked:after {
border-color: #9b23ea;
}
input[type=radio]:checked:before {
content: "";
display: block;
position: relative;
top: 2px;
left: 2px;
width: 8px;
height: 8px;
background-color: #9b23ea;
border-radius: 50%;
z-index: 1;
}
/* 主要代码部分 ----------------------------- Start */
</style>
</head>
<body>
<div class="box">
<div>
<h2>地区</h2>
<ul>
<li><label><input type="radio" name="address" value="1">北京</label></li>
<li><label><input type="radio" name="address" value="2">上海</label></li>
<li><label><input type="radio" name="address" value="3">广州</label></li>
<li><label><input type="radio" name="address" value="5">深圳</label></li>
<li><label><input type="radio" name="address" value="5">杭州</label></li>
</ul>
</div>
<div>
<h2>爱好</h2>
<ul>
<li><label><input type="checkbox" name="hobby" value="1">跑步</label></li>
<li><label><input type="checkbox" name="hobby" value="2">钓鱼</label></li>
<li><label><input type="checkbox" name="hobby" value="3">爬山</label></li>
<li><label><input type="checkbox" name="hobby" value="4">游泳</label></li>
<li><label><input type="checkbox" name="hobby" value="5">骑行</label></li>
</ul>
</div>
</div>
</body>
</html>该操作只适用于最原始的项目，最佳处理方案还是用自定义的替换，或者用个组件库layui之类的，现在vue或react这些基本都直接使用element或antd这些也基本上用不上这些了，使用过程有问题欢迎留言交流
最后一个问题
原生select在不自定义的情况下怎么能修改option的hover样式，目前还没找到任何能设置的方式