如何自定义美化radio单选/复选框和Checkbox样式-飞翔资源网

温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年7月29日，已超过 180天没有更新

在开发时，很多情况下我们需要使用单选/复选框，但是我们发现单选复选框的样式并不是我们想要的样式，我们可以通过如下设置实现自定义单选/复选样式的修改。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>checkbox美化</title>
</head>
<style type="text/css">
    /* radio */
    label.bui-radios-label input {
        position: absolute;
        opacity: 0;
        visibility: hidden; }
    label.bui-radios-label .bui-radios {
        display: inline-block;
        position: relative;
        width: 15px;
        height: 15px;
        background: #FFFFFF;
        border: 1px solid #979797;
        border-radius: 50%;
        vertical-align: middle;
        box-sizing: content-box;
        cursor: pointer;
    }
    label.bui-radios-label input:checked + .bui-radios:after {
        position: absolute;
        content: "";
        width: 9px;
        height: 9px;
        background-color: #fff;
        border-radius: 50%;
        top: 3px;
        left: 3px; }
    label.bui-radios-label input:checked + .bui-radios {
        background: #00B066;
        border: 1px solid #00B066;
    }
    label.bui-radios-label input:disabled + .bui-radios {
        background-color: #e8e8e8;
        border: solid 1px #979797;
        cursor: not-allowed;
    }
    label.bui-radios-label input:disabled:checked + .bui-radios:after {
        background-color: #c1c1c1;
    }
    label.bui-radios-label.bui-radios-anim .bui-radios {
        -webkit-transition: background-color ease-out .3s;
        transition: background-color ease-out .3s;
    }

    /* checkbox */
    label.bui-checkbox-label input {
        position: absolute;
        visibility: hidden;
        opacity: 0;
    }
    label.bui-checkbox-label .bui-checkbox {
        display: inline-block;
        position: relative;
        width: 15px;
        height: 15px;
        background: #FFFFFF;
        border: 1px solid #979797;
        border-radius: 2px;
        vertical-align: middle;
        box-sizing: content-box;
        cursor: pointer;
    }
    label.bui-checkbox-label input:checked + .bui-checkbox {
        background: #00B066 url("http://www.sinkinto.com/publics/img/right.png") no-repeat center/contain;
        border: 1px solid #00B066;
    }
    label.bui-checkbox-label input:disabled + .bui-checkbox {
        background-color: #e8e8e8;
        border: solid 1px #979797;
        cursor: not-allowed;
    }
    label.bui-checkbox-label input:disabled:checked + .bui-checkbox:after {
        color: #c1c1c1;
    }
    label.bui-checkbox-label.bui-checkbox-anim .bui-checkbox {
        -webkit-transition: background-color ease-out .3s;
        transition: background-color ease-out .3s;
    }
</style>
<body>
    <!--radio-->
    <label class="bui-radios-label bui-radios-anim">
        <input type="radio" name="sex" checked/><i class="bui-radios"></i> 男
    </label>
    <label class="bui-radios-label bui-radios-anim">
        <input type="radio" name="sex"/><i class="bui-radios"></i> 女
    </label>
    <label class="bui-radios-label">
        <input type="radio" name="sex" disabled/><i class="bui-radios"></i> 女
    </label>
    <hr>
    <!--checkbox-->
    <label class="bui-checkbox-label bui-checkbox-anim">
        <input type="checkbox" name="sex" checked/><i class="bui-checkbox"></i> 男
    </label>
    <label class="bui-checkbox-label bui-checkbox-anim">
        <input type="checkbox" name="sex"/><i class="bui-checkbox"></i> 女
    </label>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex" disabled/><i class="bui-checkbox"></i> 女
    </label>
</body>
</html>