CSS 实现自定义样式的单选框与多选框_class 写单选框-优快云博客

本文链接：https://blog.youkuaiyun.com/kk_yanwu/article/details/73739294

本文介绍了前端开发中如何使用CSS自定义单选框和多选框的样式。通过HTML的input与label配合，利用for属性绑定，结合CSS实现美化效果。示例代码包括单选框和多选框的HTML结构及对应的CSS样式。

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

前端在开发的过程中，经常会遇见使用单选框以及多选框的情况，但是默认的选框按钮的样式单一，一般我们需要去自定义一些选框按钮的样式；

通常情况下，单选、多选为方便自定义样式，一般会采用input+label去实现，这里实现的原理主要是运用了label标签的for属性；

for 属性规定 label 与哪个表单元素绑定。

1. 单选框
这里写图片描述

实现方式：input type=radio + label
HTML：

<body>
    <div class="box">
        <input type="radio"  id="radio1"  name="radio"  checked="checked"/><label for="radio1">选项一</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio"  id="radio2"  name="radio"/><label for="radio2">选项二</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio"  id="radio3"  name="radio"/><label for="radio3">选项三</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio"  id="radio4"  name="radio"/><label for="radio4">选项四</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio"  id="radio5"  name="radio"/><label for="radio5">选项五</label>
    </div>
    <div class="line"></div>
</body>

CSS:

<style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                border: none;
                box-sizing: border-box;
                outline: none;
            }
            .box{
                width: 100%;
                height: 50px;
                text-align: center;
            }

            input{
                display: none;
            }

            label{
                width: 100%;
                height: 100%;
                display: inline-block;
                position: relative;
                line-height: 50px;
                color: #999;
            }
            label:active{
                background: #EEEEEE;
            }
            label:after{
                content: "";/*必须设置*/
                display: inline-block;
                width: 20px;
                height: 20px;
                border: 1px solid green;
                position: absolute;
                top: 15px;
                left: 15px;
                border-radius: 20px;
            }

            input:checked+label:after{
                background-color: green;
            }

            .line{
                width: 100%;
                height: 1px;
                background: #ccc;
                opacity: 0.2;
            }
        </style>

2. 多选框
这里写图片描述

实现方式：input type=checkbox + label

HTML:

<body>
        <div class="box">
            <input type="checkbox"  id="checkbox1"/><label for="checkbox1">选项一</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox2"/><label for="checkbox2">选项二</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox3"/><label for="checkbox3">选项三</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox4"/><label for="checkbox4">选项四</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox5"/><label for="checkbox5">选项五</label>
        </div>
        <div class="line"></div>
    </body>

css:

    <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                border: none;
                box-sizing: border-box;
                outline: none;
            }
            .box{
                width: 100%;
                height: 50px;
            }
            input{
                display: none;
            }
            label{
                width: 100%;
                height: 50px;
                display: inline-block;
                line-height: 50px;
                position: relative;
                text-align: center;
            }
            label:active{
                background: #EEEEEE;
            }
            label:after{
                content: "";
                width: 20px;
                height: 20px;
                border: 1px solid green;
                border-radius: 20px;
                display: inline-block;
                position: absolute;
                top: 15px;
                left: 15px;
            }
            input:checked+label:after{
                background-color: green;
            }

            .line{
                width: 100%;
                height: 1px;
                background: #CCCCCC;
                opacity: 0.3;
            }
    </style>