css修改radio、checkbox默认样式

本是古典何须时尚 2022-09-16 01:27 286阅读 0赞

>  为radio类型的input标签添加类名aui-radio，如下

![0b22aa3cc73441feb246bb914f2aa713.png][]

然后引入下边css样式即可。

/* 单选、多选、开关 */
    .aui-radio,
    .aui-checkbox {
        width: 12px;
        height: 12px;
        border: 2px solid #4C8FEC;
        margin: 4px 6px 1px 4px !important;
        -webkit-border-radius: 0.6rem;
        border-radius: 0.6rem;
        font-size: 0.8rem;
        margin: 0;
        padding: 0;
        position: relative;
        display: inline-block;
        vertical-align: top;
        cursor: default;
        -webkit-appearance: none;
        -webkit-user-select: none;
                user-select: none;
        -webkit-transition: background-color ease 0.1s;
                transition: background-color ease 0.1s;
    }
    .aui-checkbox {
        border-radius: 0.1rem;
    }
    
    .aui-radio:checked,
    .aui-radio.aui-checked,
    .aui-checkbox:checked,
    .aui-checkbox.aui-checked {
        background-color:rgb(170, 225, 255);
        border: 2px solid #4C8FEC;
        margin: 4px 6px 1px 4px;
        text-align: center;
        background-clip: padding-box;
    }
    .aui-radio:checked:before,
    .aui-radio.aui-checked:before,
    .aui-checkbox:checked:before,
    .aui-checkbox.aui-checked:before,
    .aui-radio:checked:after,
    .aui-radio.aui-checked:after,
    .aui-checkbox:checked:after,
    .aui-radio:disabled,
    .aui-radio.aui-disabled,
    .aui-checkbox:disabled,
    .aui-checkbox.aui-disabled {
        background-color: #dddddd;
        border: solid 1px #dddddd;
    }
    .aui-radio:disabled:before,
    .aui-radio.aui-disabled:before,
    .aui-radio:disabled:after,
    .aui-radio.aui-disabled:after,
    .aui-checkbox:disabled:before,
    .aui-checkbox.aui-disabled:before,
    .aui-checkbox:disabled:after,
    .aui-checkbox.aui-disabled:after {
        content: '';
        width: 0.5rem;
        height: 0.3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.25rem;
        margin-top: -0.25rem;
        background: transparent;
        border: 1px solid #ffffff;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
                border-radius: 0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

[0b22aa3cc73441feb246bb914f2aa713.png]: /images/20220828/cb89b3aa4e5044159d1aa53e49055aa4.png