手写radio 改变原生效果

    
进入https://www.iconfont.cn/

搜索图标radio，然后上传到我的图标，项目

 

点击我的项目  下载图标库  下载至本地

 

 

下载后解压，复制选中的文件到项目路径下

1.页面引入iconfont<link rel="stylesheet" href="unicode//iconfont.css">
2.修改radio样式
.changeradio{
        position:relative;
        background-color: transparent;
        -webkit-appearance: none;
        width:28px;
        height:28px;
    }
    .changeradio:before{
        content: "\e600";/*iconfont.css对应的content */
        font-size:24px; 
        /* position:absolute; */
        left:0;
        top:0;
        width:28px;
        height:28px;
        border-radius:100%;
        
        color:blue;
    } 
    
    .changeradio[type=radio]:checked:before {
        content: "\eb9a";
        color:blue;
        
    } 

3.行内样式引用iconfont Class 否则不生效
<input class="changeradio iconfont" type="radio" style="font-size:24px;" name="radio1"></input>

 

4.最终的效果如下