css美化单选款、复选框

最新推荐文章于 2025-05-28 14:03:39 发布

原创最新推荐文章于 2025-05-28 14:03:39 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #源码 #web

web前端专栏收录该内容

143 篇文章

订阅专栏

本文介绍了一种方法来美化网页中的单选按钮和复选框，提供了广泛的浏览器支持，包括Chrome, Firefox, Safari, Opera以及IE9及更高版本。" 129735754,10405582,MySQL行锁分析：加锁规则与实例解析,"['数据库', 'MySQL', '数据库锁']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一款美化单选款、复选框的样式

支持度：

Chrome
Firefox
Safari
Opera
IE9 && IE9+

代码：

<!DOCTYPE html>
<html>
<head></head>
<style>
    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        line-height: 140%;
    }

    @keyframes hover-color {
        from {
            border-color: #c0c0c0;
        }
        to {
            border-color: #3e97eb;
        }
    }

    .magic-radio,
    .magic-checkbox {
        position: absolute;
        display: none;
    }

    .magic-radio[disabled],
    .magic-checkbox[disabled] {
        cursor: not-allowed;
    }

    .magic-radio + label,
    .magic-checkbox + label {
        position: relative;
        display: block;
        padding-left: 30px;
        cursor: pointer;
        vertical-align: middle;
    }

    .magic-radio + label:hover:before,
    .magic-checkbox + label:hover:before {
        animation-duration: 0.4s;
        animation-fill-mode: both;
        animation-name: hover-color;
    }

    .magic-radio + label:before,
    .magic-checkbox + label:before {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 20px;
        height: 20px;
        content: '';
        border: 1px solid #c0c0c0;
    }

    .magic-radio + label:after,
    .magic-checkbox + label:after {
        position: absolute;
        display: none;
        content: '';
    }

    .magic-radio[disabled] + label,
    .magic-checkbox[disabled] + label {
        cursor: not-allowed;
        color: #e4e4e4;
    }

    .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
    .magic-checkbox[disabled] + label:hover,
    .magic-checkbox[disabled] + label:before,
    .magic-checkbox[disabled] + label:after {
        cursor: not-allowed;
    }

    .magic-radio[disabled] + label:hover:before,
    .magic-checkbox[disabled] + label:hover:before {
        border: 1px solid #e4e4e4;
        animation-name: none;
    }

    .magic-radio[disabled] + label:before,
    .magic-checkbox[disabled] + label:before {
        border-color: #e4e4e4;
    }

    .magic-radio:checked + label:before,
    .magic-checkbox:checked + label:before {
        animation-name: none;
    }

    .magic-radio:checked + label:after,
    .magic-checkbox:checked + label:after {
        display: block;
    }

    .magic-radio + label:before {
        border-radius: 50%;
    }

    .magic-radio + label:after {
        top: 6px;
        left: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3e97eb;
    }

    .magic-radio:checked + label:before {
        border: 1px solid #3e97eb;
    }

    .magic-radio:checked[disabled] + label:before {
        border: 1px solid #c9e2f9;
    }

    .magic-radio:checked[disabled] + label:after {
        background: #c9e2f9;
    }

    .magic-checkbox + label:before {
        border-radius: 3px;
    }

    .magic-checkbox + label:after {
        top: 2px;
        left: 7px;
        box-sizing: border-box;
        width: 6px;
        height: 12px;
        transform: rotate(45deg);
        border-width: 2px;
        border-style: solid;
        border-color: #fff;
        border-top: 0;
        border-left: 0;
    }

    .magic-checkbox:checked + label:before {
        border: #3e97eb;
        background: #3e97eb;
    }

    .magic-checkbox:checked[disabled] + label:before {
        border: #c9e2f9;
        background: #c9e2f9;
    }
</style>
<body>
<h3>Checkbox</h3>

<div>
    <input class="magic-checkbox" type="checkbox" name="layout" id="1">
    <label for="1">Normal</label>
</div>

<div>
    <input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
    <label for="2">Checked</label>
</div>




<h3>Radio</h3>

<div>
    <input class="magic-radio" type="radio" name="radio" id="11">
    <label for="11">Normal</label>
</div>

<div>
    <input class="magic-radio" type="radio" name="radio" id="22" checked>
    <label for="22">Checked</label>
</div>

<div>
    <input class="magic-radio" type="radio" id="33" disabled="disabled">
    <label for="33">Disabled</label>
</div>

<div>
    <input class="magic-radio" type="radio" id="44" disabled="disabled" checked>
    <label for="44">Checked && Disabled</label>
</div>
</body>
</html>