美化浏览器自带的 radio ，checkbox 属性

转载

Hello_Martin 2023-04-03 15:05:01 博主文章分类：前端

美化浏览器自带的 radio ，checkbox

需求

设计师：你那个单选框按钮好丑啊，跟我的设计稿差好远。程序员：我有什么办法，浏览器就是这样的。。。

记得刚开始写页面时候，被浏览器各种默认的 UI

先讲一下原理：checkbox hack技术

我们使用 CSS 一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一些简单的扩展，我们可以不使用任何 JavaScript
相信很多前端开发人员都会遇到 boss 让修改 checkbox 和 radio

今天教大家一种方法，不用替换图片，随意修改样式。

先讲一下原理：两个关键东东，一是伪类选择器 :checked，表示对应控件元素（单选框或是复选框）选中时的样式；二就是加号 +
而如何让单复选框选中和不选中了，那就是 label 标签了哈，for 属性锚定对应的单选框或是复选框，然后点击这里的 label

代码

这里只给一个 radio

<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}