自定义组件无法修改样式，如radio,checkbox,那就间接修改样式

 先让checkbox隐藏display:none,用label标签把radio和标签包在一起，这样点击i标签，radio就会被选中和不选中
  （也可以不用label，这样把input的opacity:0,定位平铺到i上面）
  接着让radio选中时，旁边的i一个状态    .radio1:checked+i{}  +对应一个，~对应多个
  radio不选中时，旁边的i另一个状态  .radio1+i::after{} 也可以用伪元素给i加内容

样式：

<style>       
        .radio1{
            position:relative;
            display:none;
        }
        .radio1:checked+i::after{
            content:'';
            display:inline-block;
            width:10px;
            height:10px;
            background-color:red;
            margin:5px;
            
        }
        .radio1+i{
            content:'';
            display:inline-block;
            width:20px;
            height:20px;
            border-radius: 50%;
            background-color:green;
        }
  </style>

html:

<label>
    <input type="checkbox" class="radio1">
    <i></i>
 </label>