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 */

示例代码

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样式，目前还没找到任何能设置的方式