CSS 实现自定义样式的单选框与多选框

最新推荐文章于 2024-05-23 15:36:14 发布

4张A

最新推荐文章于 2024-05-23 15:36:14 发布

阅读量2.6w

点赞数 4

分类专栏：前端文章标签： css 标签 checkbox label

本文链接：https://blog.csdn.net/kk_yanwu/article/details/73739294

版权

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

通常情况下，单选、多选为方便自定义样式，一般会采用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

最低0.47元/天解锁文章

4张A

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
CSS 实现自定义样式的单选框与多选框

前端在开发的过程中，经常会遇见使用单选框以及多选框的情况，但是默认的选框按钮的样式单一，一般我们需要去自定义一些选框按钮的样式；通常情况下，单选、多选为方便自定义样式，一般会采用input+label去实现，这里实现的原理主要是运用了label标签的for属性； for 属性规定 label 与哪个表单元素绑定。 1. 单选框实现方式：input type=radio +
复制链接

扫一扫