修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

怼烎@ 2021-12-21 14:29 361阅读 0赞

表单中，经常会使用到单选按钮和复选框，但是，input\[type="radio"\] 和 input\[type="checkbox"\] 的默认样式在不同的浏览器或者手机上，显示的效果总是不统一，而且难以修改器样式。

## input\[type="radio"\] 样式定制 ##

代码：

css 样式

input[type="radio"] {
        height: 22px;
        width: 22px;
        margin-right: 10px;
        display: none;
    }
    input[type="radio"] + label::before {
        content: "\a0"; /*不换行空格*/
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        width: 18px;
        height: 18px;
        margin-right: 10px;
        border-radius: 50%;
        border: 1px solid #003c66;
        background: #fff;
        line-height: 22px;
        box-sizing: border-box;
    }
    input[type="radio"]:checked + label::before {
        background-color: #003c66;
        background-clip: content-box;
        padding: 3px;
    }

效果如图：

![单选框][radio.jpg_raw_true]

## input\[type="checkbox"\] 样式定制 ##

代码：

css 样式

input[type="checkbox"] {
        display: none;
    }
    
    input[type="checkbox"]+label>i {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #bbb;
        background: #bbb;
        margin-right: 10px;
        vertical-align: middle;
    }
    
    input[type="checkbox"]:checked+label>i {
        position: relative;
    }
    
    input[type="checkbox"]:checked+label>i::before {
        content: '';
        position: absolute;
        width: 12px;
        height: 18px;
        color: black;
        border-bottom: 1px solid green;
        border-right: 1px solid green;
        left: 50%;
        top: 20%;
        transform-origin: center;
        transform: translate(-50%, -30%) rotate(40deg);
        -webkit-transform: translate(-50%, -30%) rotate(40deg);
    }

效果如图：

![复选框][checkbox.jpg_raw_true]

转载于:https://www.cnblogs.com/cckui/p/9411498.html

[radio.jpg_raw_true]: /images/20211220/bec4bf2d9a8d494eb79bcf901d9add51.png
[checkbox.jpg_raw_true]: /images/20211220/d75bd4a5aaa74ca5bcf0fb513e54e55b.png