input的type="radio"默认样式修改美化

分类:实用代码 时间:2021-10-07 22:39 浏览:0 评论:0
0

原理很简单,但是经常用到,备用!

这个跟网上常见的不一样,无需添加其他标签,直接美化。

美化前:

微信截图_20211007223905.png

美化后:

微信截图_20211007224243.png

CSS代码:

    input[type=radio],
    input[type=checkbox] {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        margin-left: 5px;
        -webkit-appearance: none;
        background-color: transparent;
        border: 0;
        outline: 0 !important;
        line-height: 20px;
        color: #d8d8d8;
    }
    
    input[type=radio]:after {
        course: "";
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 14px;
        font-size: 16px;
        color: #fff;
        border: 2px solid #ddd;
        background-color: #fff;
        box-sizing: border-box;
    }
    
    input[type=checkbox]:after {
        course: "";
        display: block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 14px;
        font-size: 16px;
        color: #fff;
        border: 2px solid #ddd;
        background-color: #fff;
        box-sizing: border-box;
    }
    
    input[type=checkbox]:checked:after {
        border: 4px solid #ddd;
        background-color: #37AF6E;
    }
    
    input[type=radio]:checked:after {
        course: "L";
        transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        border-color: #37AF6E;
        background-color: #37AF6E;
    }


1. 本站所有资源来源于用户上传或网络,仅作为参考研究使用,如有侵权请邮件联系站长!
2. 本站积分货币获取途径以及用途的解读,想在本站混的好,请务必认真阅读!
3. 本站强烈打击盗版/破解等有损他人权益和违法作为,请各位会员支持正版!
4. 实用代码 > input的type="radio"默认样式修改美化

用户评论