自定义单选按钮（radio）和自定义复选框（checkbox）

最新推荐文章于 2024-06-20 16:56:39 发布
置顶 最新推荐文章于 2024-06-20 16:56:39 发布
阅读量1.2w 收藏 11
点赞数 2
分类专栏： demo 文章标签： 自定义单选按钮 自定义复选框（checkbox） 自定义radio 自定义checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tel13259437538/article/details/80504186
版权

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

在项目中经常会遇到样式美观的radio或者checkbox，经过我的观察，发现有两种实现方法：

  • 利用点击时切换不同的图片代替radio或者checkbox，来实现选中或者取消时的样式变换效果。
  • 利用label标签的特性以及i元素搭配伪元素（:before或者:after）进行模拟。

下面主要说第二种实现方式：

实现原理

    <!-- 结构：一个 label 标签，其中包含 input 元素和 i 元素 -->
    <label>
        <input type="radio"><i><i>男
    </label>
    <!-- 基本原理： -->
    <!-- 1.首先将 input 元素 “隐藏” 起来；-->
    （1）可以使用  visibility: hidden; opacity: 0;来实现
    （2）也可以使用 display:none;来实现
    （3）或者使用 position:absolute; left:-9999px;来实现，都是可以的
    <!-- 2.然后利用 label 标签的特性，在点击时将 input 元素选中或取消选中。 -->
    <!-- 3.i 元素结合伪类（:before或:after）模拟单选框 radio 和多选框 checkbox 的外观。 -->

具体操作

一、美化单选按钮（radio）

1.具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3美化单选按钮</title>
    <style>
        /*隐藏input*/
        label.bui-radios-label input[type="radio"]{
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }
        /*自定义radio*/
        label.bui-radios-label .bui-radios{
            display: inline-block;
            position: relative;
            width: 13px;
            height: 13px;
            background-color: #fff;
            border: 1px solid #979797;
            border-radius: 50%;
            vertical-align: -2px;
            margin-right: 5px;
        }
        /*单选框选中后，自定义radio的样式*/
        label.bui-radios-label input[type="radio"]:checked + .bui-radios:after{
            position: absolute;
            content: "";
            width: 7px;
            height: 7px;
            background-color: #fff;
            border-radius: 50%;
            top: 3px;
            left: 3px;
        }
        label.bui-radios-label input[type="radio"]:checked + .bui-radios{
            background-color: #00B066;
            border:1px solid #00B066;
        }
        label.bui-radios-label input[type="radio"]:disabled + .bui-radios{
            background-color: #e8e8e8;
            border:1px solid #979797;
        }
        label.bui-radios-label input[type="radio"]:disabled:checked + .bui-radios:after{
            background-color: #c1c1c1;
        }
        /*自定义radio的过渡效果*/
        label.bui-radios-label.bui-radios-anim .bui-radios{
            -webkit-transition:background-color ease-out .5s;
            transition:background-color ease-out .5s;
        }
    </style>
</head>
<body>
    <h4>有简单的背景动画：</h4>
    <label class="bui-radios-label bui-radios-anim">
        <input type="radio" name="sex"><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>
    <h4>无背景动画：</h4>
    <label class="bui-radios-label">
        <input type="radio" name="sex"><i class="bui-radios"></i>男
    </label>
    <label class="bui-radios-label">
        <input type="radio" name="sex"><i class="bui-radios"></i>女
    </label>
    <h4>禁用状态（disabled）：</h4>
    <label class="bui-radios-label">
        <input type="radio" name="sex" disabled="disabled"><i class="bui-radios"></i>男
    </label>
    <label class="bui-radios-label">
        <input type="radio" name="sex" disabled="" checked=""><i class="bui-radios"></i>女
    </label>
</body>
</html>

2.效果展示

这里写图片描述

二、美化多选框（checkbox）

1.具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3美化checkbox</title>
    <style>
        label.bui-checkbox-label input[type="checkbox"]{
            visibility: hidden;
            opacity: 0;
        }
        label.bui-checkbox-label .bui-checkbox{
            display: inline-block;
            position: relative;
            width: 13px;
            height: 13px;
            border: 1px solid #ddd;
            background-color: #fff;
            vertical-align: -2px;
            margin-right: 5px;
        }
        label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox:after{
            position: absolute;
            content: "";
            width:8px;
            height: 4px;
            border-left:2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg) translate(-50%,-50%);
            /*top:50%;*/
            left:50%;
        }
        label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox {
            background-color: #00B066;
        }
        label.bui-checkbox-label input[type="checkbox"]:disabled + .bui-checkbox{
            background-color: #e8e8e8;
            border:1px solid #979797;
        }
        label.bui-checkbox-label input[type="checkbox"]:disabled:checked + .bui-checkbox:after{
            border-color: #000;
        }
        label.bui-checkbox-label.bui-checkbox-anim .bui-checkbox{
            -webkit-transition:background-color ease-in-out .3s;
            transition:background-color ease-in-out .3s;
        }
    </style>
</head>
<body>
    <h4>有简单的背景动画：</h4>
    <label class="bui-checkbox-label bui-checkbox-anim">
        <input type="checkbox" name="sex"><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>
    <h4>无背景动画：</h4>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>男
    </label>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>女
    </label>
    <h4>禁用状态（disabled）：</h4>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex" disabled="disabled"><i class="bui-checkbox"></i>男
    </label>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex" disabled="" checked=""><i class="bui-checkbox"></i>女
    </label>
</body>
</html>

2.效果展示
这里写图片描述

monkeyfly007
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue复选框组件自定义对勾_Vue自定义单选按钮和复选框组件
weixin_39884078的博客
12-22 702
“ 做好本身就好了呀 ”题目前段时间接到一个使命，须要做一个自定义的单选和多选按钮，然则之前都是用现成的UI框架，都不必本身写款式，直接一套就是干！然则进公司后，发明部门不实用外部UI框架，好吧，那我就本身写呗！构想我想到的方法是应用原生的radio和CheckBox，再经由过程款式掩盖的体式格局。兼容性因为在写组件时使用了flex规划，so 低版本浏览器不支持的哈，详细有关flex的学问能够进修...
jQuery自定义单选按钮复选框样式特效
06-10
"jQuery自定义单选按钮复选框样式特效"是一个针对初学者的简单教程，它演示了如何利用jQuery库对网页中的基本表单元素，如单选按钮（radio button）和复选框（checkbox），进行美化和功能增强。下面我们将详细探讨这...
Flutter 自定义单选按钮和自定义复选框
半身风雪
11-21 2826
在日常开发中，很多时候系统自带的单选按钮，复选框无法满足我们的需求，那么就需要自定义样式的按钮，本篇文章将记录如何自定义单选按钮，复选框。
用户表单form:radio,checkbox,滚动条,select[multiple]选中自定义样式及按钮type
weixin_47529732的博客
06-20 262
* radio 选择自定义样式 *//* checkbox 选中自定义样式 */top: 0;/* 设置滚动条 *//* 设置滚动条的宽度和颜色 */width: 5px;/* 设置滚动条的宽度 *//* 设置滚动条的背景颜色 *//* 设置滚动条滑块的样式 *//* 设置滑块的圆角 *//* 设置滑块的颜色 *//* 设置滚动条滑块hover效果的样式 *//* 设置滑块hover时的颜色 */
自定义vant 单选 radio和复选框 checkbox 样式
qq_43195831的博客
04-26 4034
自定义vant 单选 radio和复选框 checkbox 样式。其中，数据是自己的，不做过多解释，更换成自己的数据即可。好了，最后看下界面吧，我这里做的是答题选中的效果。2、这里是复选框 checkbox 的哦。3、这里是重点哦（ CSS啦 ）1、这里是单选 radio 哦。话不多数，直接上代码。
纯CSS 自定义radio单选按扭、checkbox复选框 默认样式
沐枫
09-29 3804
纯CSS 自定义修改原生html中的radio单选按扭标签、checkbox复选框标签的默认样式，选中之前、之后状态的颜色，边框色，选中动画等，可根自己的需要调整。
checkbox(复选框)和radio(单选按钮)的区别与详解
热门推荐
WinstonLau的博客
03-13 10万+
选中和取消 选中一个复选框后，再次点击它，即可取消选中 选中一个单选按钮后，再次点击它，不能取消选中 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;amp;quot;en&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp
微信小程序之自定义单选框radio和复选框和checkbox的样式
Hug_rj的博客
08-24 2万+
刚开始小程序出来那会研究过自定义radio和checkbox的样式，在后来的升级中，原先写的样式出现了一些问题， 例如： 1、未选中和选中时按钮大小不一，导致view盒子高度变化，出现晃动； 2、选中后出现按钮还有原始的默认背景（绿色）； 这是升级后的，主要还是觉得自定义样式能使我们在小程序的开发中减少图片的加载以及内存；同时后期的维护也更加便利；   更改radio的样式，效果如下图...
JQuery操作单选按钮Radio和复选框checkbox
哈
07-30 461
设置第一个Radio为选中值： 设置最后一个Radio为选中值： 根据索引值设置任意一个radio为选中值： 根据Value值设置Radio为选中值 删除指定Value值的Radio 删除第几个Radio 8、遍历Radio
小程序自定义单选框radio和复选框checkbox样式
zz_xiaojun的博客
10-15 265
今日更新:小程序知识 自定义单选框radio和复选框checkbox 1.单选框 radio .wx-radio-input { /* 自定义样式.... */ height: 24rpx; width: 24rpx; margin-top: -4rpx; border-radius: 50%; border: 2rpx solid #999; background: transparent; } radio .wx-radio-input.wx-radio-input
html自定义单选按钮,美化表单——自定义单选按钮和复选按钮
weixin_33187554的博客
06-18 1138
大家都知道，在Web的Form中美化是最头痛的，尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的，像背景颜色或者背景图片，甚至说margin和padding等等在各浏览器下都没法实现一致的效果，具体大家可以看看这里所展示的页面效果。为了解决这样的问...
jQuery自定义单选按钮复选框代码
06-24
本资源“jQuery自定义单选按钮复选框代码”专注于改进网页表单元素的样式，特别是单选按钮（radio）和复选框（checkbox），使其更符合现代网页设计的审美需求。 一、jQuery简介 jQuery是由John Resig于2006年创建的...
HTML复选框和单选框 checkbox和radio事件介绍
10-27
HTML中的复选框（Checkbox）和单选框（Radio）是网页交互中常见的元素，用于收集用户的选择数据。它们在事件处理方面有一些特殊性，尤其是关于`change`和`click`事件的区别。 首先，让我们来看复选框和单选框的基本...
jQuery自定义单选按钮复选框特效代码
03-20
本篇文章将详细讲解如何利用jQuery实现自定义的单选按钮（radio button）和复选框（checkbox）的样式效果。 首先，jQuery 的核心在于其简洁的API，使得开发者能用更少的代码实现更多的功能。对于自定义单选按钮和复...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
四足宠物机器狗动态步行规划与仿真.pdf
最新发布
07-28
四足宠物机器狗动态步行规划与仿真
单选按钮、复选框使用时要注意什么
06-07
使用单选按钮和复选框时需要注意以下几点： 1. 为每个单选按钮和复选框指定唯一的`name`属性，以便在提交表单时可以正确地识别用户的选择。 2. 对于单选按钮，必须同时指定每个按钮的`value`属性和`checked`属性，以便指定默认选中的按钮和每个按钮所对应的值。 3. 对于复选框，可以使用`checked`属性指定默认选中的选项。 4. 使用`<label>`标签为每个单选按钮和复选框提供描述文本，以便用户明确选项含义。 5. 对于复选框，可以在`<label>`标签内嵌套`<input>`标签来实现点击 label 标签也可以选中对应的复选框，需要设置`for`属性和`id`属性保持一致。 例如，下面是一个单选按钮和复选框的示例： ```html <form> <p>请选择你喜欢的颜色：</p> <input type="radio" id="red" name="color" value="red" checked /> <label for="red">红色</label> <input type="radio" id="green" name="color" value="green" /> <label for="green">绿色</label> <input type="radio" id="blue" name="color" value="blue" /> <label for="blue">蓝色</label> <p>请选择你喜欢的水果：</p> <input type="checkbox" id="apple" name="fruit" value="apple" checked /> <label for="apple">苹果</label> <input type="checkbox" id="orange" name="fruit" value="orange" /> <label for="orange">橙子</label> <input type="checkbox" id="banana" name="fruit" value="banana" /> <label for="banana">香蕉</label> </form> ``` 在这个示例中，我们使用了单选按钮和复选框来让用户选择颜色和水果。其中，每个单选按钮和复选框都有一个唯一的`name`属性，以便在提交表单时可以正确地识别用户的选择。对于单选按钮，我们还指定了每个按钮的`value`属性和`checked`属性，以便指定默认选中的按钮和每个按钮所对应的值。同时，我们还使用了`<label>`标签为每个单选按钮和复选框提供描述文本，让用户明确选项含义。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值