jq, js native radio single button style modification

Who said that the original radio style is not easy to modify, everything can be modified haha

---

foreword

Use the native radio radio button to achieve the following effects.

---

1. Implementation

As shown in the picture, I need a radio button to switch colors. Since the first version I used was implemented by the native radio, the logic has been written, so when the product needs to modify the style, I don’t want to rewrite the logic, so I need to realize the ugly style of the native radio as shown in the picture.

There is nothing to say about the html code. The data-type inside is defined by myself, because it is needed when the css defines the style of each 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>

Second , the key point is the following code:

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;
}

Step on the pit:

The values ​​of height and line-height in the selected style must be consistent, otherwise the black frame selected below will be leaked when selected.