本文主要是介绍css设置input单选radio多选checkbox样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近接手一个古老的项目，要修改里边的主题颜色，使用css的var方法一路轻松，最后在input的单选radio和多选checkbox被踩了刹车，也是有几年没做这种原始的项目手生了，最后经过几番折腾后，通过input的伪元素将其改造了，效果还不错在这里分享一下
未处理的样式
处理后的样式
主要代码部分
需要注意调整伪类:after和:before的尺寸和位置，根据项目的初始化样式调整, 主要适用于PC老项目
/* 主要代码部分 ----------------------------- 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>*{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样式，目前还没找到任何能设置的方式
这篇关于css设置input单选radio多选checkbox样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
