jq，js原生radio单选框样式修改

谁说原生radio样式不好修改的，万物皆可修改哈哈

---

前言

使用原生radio单选框实现以下效果。

---

一、实现

如图需要一个切换颜色的单选框，由于第一版我用的原生radio实现的，逻辑也都写好了，所以当产品需要修改样式的时候我不想重写逻辑了，所以需要把原生radio丑丑的样式实现成这个图上的样子。

html代码没啥好说的都会哈，里面的data-type是我自己定义的，因为后面css要定义每个radio的样式的时候需要。

 <div class="select_con select_con_color">
      <ul id="chart-choose-con">
           <li>
               <input type="radio" name="radioData" data-type="radio1" value="1">
                                    <span>蓝色</span>
            </li>
            <li>
                <input type="radio" name="radioData" data-type="radio2" value="2">
                                    <span>绿色</span>
            </li>
            <li>
                <input type="radio" name="radioData" data-type="radio3" value="3">
                                    <span>黄色</span>
             </li>
             <li>
                 <input type="radio" name="radioData" data-type="radio4" value="4">
                                    <span>红色</span>
             </li>
          </ul>
  </div>

二、重点就是以下代码：

input[type="radio"] {width: 30px;height: 30px;margin: 0 4px 0 0;appearance: none;outline: none;position: relative;cursor: pointer;}
/** 未被选中的样式*/
input[data-type="radio1"]::before {content: "";position: absolute;top: 0;left: 0;background: #003594;border-radius: 4px;width: 32px;height: 32px;border: 1px solid #d9d9d9;border-radius: 4px;}
input[data-type="radio2"]::before {content: "";position: absolute;top: 0;left: 0;background: #13C2C2 ;border-radius: 4px;width: 32px;height: 32px;border: 1px solid #d9d9d9;border-radius: 4px;}
input[data-type="radio3"]::before {content: "";position: absolute;top: 0;left: 0;background: #FAAD14;border-radius: 4px;width: 32px;height: 32px;border: 1px solid #d9d9d9;border-radius: 4px;}
input[data-type="radio4"]::before {content: "";position: absolute;top: 0;left: 0;background: #FA541C;border-radius: 4px;width: 32px;height: 32px;border: 1px solid #d9d9d9;border-radius: 4px;}
/** 选中的样式 */
input[type="radio"]:checked::before {content: "\2713";   /* 2713表示勾勾✓ *//* background: #003594; */position: absolute;top: 0;left: 0;width: 32px;height: 32px;border: none;border-radius: 4px;color: #fff;font-size: 20px;font-weight: bold;text-align: center;line-height: 32px;
}

踩坑：

选中样式中的height和line-height的数值一定要一致哈，不然选中的时候会漏出来底下选中的黑框框。