自定义修改 input 表单类型radio 、checkbox

最终实现效果图：

首先我们可以拿checkbox 复选框 来举例子

1. 我们可以使用一个choose作为 容器，input 原有表单隐藏掉，利用labal 标签 继承的关系来自定义效果。

2. html 代码如下, input 的id值一定是与 label 对应的

 <div class="choose">
  <input type="checkbox" name="name" id="id1">
  <label for="id1"></label>
   <span>男</span>
  <div>

3. css 代码 如下所示：

4. 给 父级盒子choose 做一个相对定位

5. 给 原来的表单类型更改大小并隐藏

6. 将lable 定位到 input 的位置,根据label 自定义实现复选框效果

7. 给自定义的复选框设置选中后的背景颜色

8. 选中后的效果 改写 ☑️

/*给 父级盒子choose 做一个相对定位*/
.choose{ 
 position: relative;
 }
/*5.给 原来的表单类型更改大小并隐藏*/
.choose input[type="checkbox"]{
height: 2.125rem;
width: 2.125rem;
vertical-align: middle;
opacity: 0;
}
/*6.将lable 定位到 input 的位置,根据label 自定义实现复选框效果 */
.choose label{
    position: absolute;
    background: #E5E5E5;
    left:0;
    top: 0.5rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;     
    }
/*7. 给自定义的复选框设置选中后的背景颜色 */
  .choose input:checked+label{
    background: #FBD9D5;
  }
   /*8. 选中后的效果 改写 ☑️*/
   .choose input:checked+label::after{
           position: absolute;
           left: .6375rem;
           top:.24rem;
           content: "";
           width: .575rem;
           height:.9125rem ;
           border: .225rem #F25441 solid;
           transform: scale(0.8);
           border-top: none;
           border-left: none;
           transform: rotate(45deg);
       }