css设置input单选radio多选checkbox样式

最近接手一个古老的项目，要修改里边的主题颜色，使用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 */

示例代码

<!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>css">*{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>