改变checkbox点选多选框的样式

最新推荐文章于 2023-09-15 10:11:55 发布
最新推荐文章于 2023-09-15 10:11:55 发布
阅读量2.2k 收藏
点赞数
分类专栏： frontend笔记 笔记 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43999568/article/details/90517524
版权
本文介绍了如何改变checkbox的默认样式，通过隐藏input标签并利用label标签实现点击效果，提供了一种美化多选框样式的解决方案。
摘要由CSDN通过智能技术生成

第一次遇到要修改checkbox的样式，毕竟太丑了，除了学校答题网站基本没见到过用的

怎么搞呢，大概思路就是把input标签的默认样式隐藏，在input后面加label标签，因为点label也能触发input的默认时间，就直接改label的点击样式就好了

放下代码

 		.check_input {
   
 		/*去掉input原有样式*/
            width: 4.3vw;
            height: 4.3vw;
            visibility: hidden;
        }
        .check_input+label {
最低0.47元/天 解锁文章
Jam2018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
改变checkbox背景勾选样式
11-24
改变checkbox背景勾选样式
微信小程序重写checkbox的样式，将方块变成圆形 css
qq_45832807的博客
07-08 3425
/* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 46rpx; /* 背景的宽 */ height: 46rpx; /* 背景的高 */ } /* 选中后的 背景样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border: 1rpx .
纯CSS设置Checkbox复选框控件的样式
qq_27009517的博客
08-12 6025
下面是纯CSS设置Checkbox复选框控件的五种简单样式，有兴趣的可以进行改动将其变成自己想要的样式。 首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。 隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。 样式一
checkbox的三种状态——全选、部分选择、全不选
liusixsixsix的博客
10-16 2232
<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox> checkbox有三种状态全选(显示的’√’), 选中部分(显示的’-’), 全不选(啥都没显示) 对于indeterminate和v-model绑定的a和b的值 如果true true 或者 true false样式为- 如果false true样式为√ 如果false false样式为不勾 <template> <div class
input修改checkbox复选框默认选中样式
最新发布
m0_53206841的博客
09-15 2678
input修改checkbox默认选中样式，直接设置选中后的样式不生效，需要先给复选框设置-webkit-appearance: none（取消默认样式）， 再设置样式才会生效。
表单checkbox多选框选择特效
04-06
例如，我们可以使用伪类`:checked`来改变选中状态下的多选框样式，或者通过`::before`和`::after`伪元素来添加自定义图标。 1. **伪类`:checked`**：这是CSS3中的一个非常重要的特性，可以用于检测元素是否被选中。...
checkbox 复选框样式
11-25
因此，"checkbox 复选框样式自定义"成为了一个重要的技能点，它允许开发者通过CSS来改变复选框的外观，以适应各种网站或应用的设计风格。 首先，了解HTML中的复选框结构是至关重要的。复选框由`<input>`元素和`...
一波CSS的Checkbox复选框样式代码分享
09-24
然而，浏览器默认的复选框样式往往单调，无法满足个性化设计的需求。本文将分享如何利用CSS对Checkbox进行样式定制，以实现独特的视觉效果。 首先，为了隐藏默认的Checkbox，我们需要在CSS中添加如下代码： ```css...
CheckBox复选框美化版
01-23
在网页设计中，CheckBox复选框是用户交互中不可或缺的一部分，它允许用户在多个选项中进行多选。然而，原始的HTML复选框在样式上可能较为单一，不能满足所有设计需求，因此“CheckBox复选框美化版”应运而生。这个...
html5 css3制作checkbox多选框选中样式特效
11-05
本教程将详细讲解如何利用HTML5和CSS3来创建一个具有独特选中样式的checkbox多选框特效。 首先，HTML5的`<input>`标签用于创建交互元素，其中`type="checkbox"`属性定义了一个复选框。基本的HTML结构可能如下： ``...
radio/checkbox默认样式太丑？换个新鲜的样子吧！.zip
09-24
radio/checkbox默认样式太丑？换个新鲜的样子吧！.zip,Radio and checkbox-style based on Javascript
checkbox自定义样式
weixin_42887827的博客
07-17 5909
checkbox自定义样式1 1 常见的自定义样式是改变checkbox的button图片，但是他的需求是去掉checkbox的选项框，使checkbox的样式类似button。我最初给的建议是使用TextView，点击一次改变背景颜色，然后保存当前状态（选中或未选中），但还是很麻烦，查找资料，找到了第二种checkbox的自定义样式方式，总结一下，备忘。 一、修改checkbox选项框样式 ...
html5复选框怎么设置样式,html中关于checkBox选中样式设置
weixin_32297123的博客
06-04 1410
例如外卖服务区域，选择时为多选，且一般隐藏checkbox样式框。只留下label字体和设置的外边框来进行选中样式控制，以此来提高用户体验。这时要对checkbox进行处理我总结的一个方法就是根据checked去进行设置例子：桥西区这里我把checkbox和label写在p标签里，这样既可以实现点击文字选中。选中后样式控制：/*选矿*/.select-ul li p label,.type-lis...
css修改input的 checkbox 选中样式
thisReally的博客
12-24 5218
实现的效果： 代码如下： //可以使用 lable 标签的for属性，绑定到input标签上（for属性应对应到input标签中的id） //这是题外话，我这边没有这一项操作。 &amp;amp;lt;div class=&amp;quot;check&amp;quot;&amp;amp;gt; &amp;amp;lt;label class=&amp;quot;label&amp;quot;&amp;amp;gt; &amp;
自定义checkbox选中样式
m0_37378152的博客
03-10 919
方案1：修改label的before html： <div class="custom-checkbox"> <input id="checkbox" type="checkbox" name="checkbox"> <label for="checkbox"></label> <span>自定义勾选</span> </div> css: .custom-checkbox
修改checkbox的样式
在路上`的博客
06-06 4903
checkbox 样式覆盖
CheckBox 自定义选中样式
weixin_48923034的博客
11-26 390
第一步 在drawable下创建文件一个.xml文件 名字随便起一个 符合命名规范就行 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/icon_a" android:state_checked="false" /> &lt
使用css修改checkbox选择框的样式
weixin_33805992的博客
08-22 1293
二. 修改思路： 给原本的checkbox框加上visibility: hidden;属性，使其隐藏同时又占据原本在页面上面的位置，说直白点就是，使checkbox看不见，但是仍然占有原来的位置。 然后使用绝对定位label标签覆盖到checkbox框上面，通过修改label标签达到修改checkbox框的...
改变checkbox选中的默认样式及根据后端数据选中对应的选项
hyupeng1006的博客
05-10 1279
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
利用js调整多选框样式
05-28
可以通过以下步骤利用 JavaScript 调整多选框的样式： 1. 首先，获取多选框元素的引用。可以使用 `document.getElementById()` 或 `document.querySelector()` 方法获取此元素的引用。 2. 然后，为多选框添加一个事件监听器，当它被选中或取消选中时触发此监听器。 3. 在事件监听器中，使用 JavaScript 修改多选框的样式。例如，可以通过修改多选框的背景颜色或边框样式来修改其外观。 以下是一个示例代码，可以用来实现这一功能： HTML 代码： ```html <input type="checkbox" id="checkbox1" value="1"> <label for="checkbox1">选项 1</label> <input type="checkbox" id="checkbox2" value="2"> <label for="checkbox2">选项 2</label> ``` JavaScript 代码： ```javascript // 获取多选框元素的引用 const checkbox1 = document.getElementById("checkbox1"); const checkbox2 = document.getElementById("checkbox2"); // 为多选框添加事件监听器 checkbox1.addEventListener("change", function() { // 根据多选框的选中状态修改样式 if (checkbox1.checked) { checkbox1.style.backgroundColor = "green"; checkbox1.style.border = "2px solid green"; } else { checkbox1.style.backgroundColor = ""; checkbox1.style.border = ""; } }); checkbox2.addEventListener("change", function() { // 根据多选框的选中状态修改样式 if (checkbox2.checked) { checkbox2.style.backgroundColor = "green"; checkbox2.style.border = "2px solid green"; } else { checkbox2.style.backgroundColor = ""; checkbox2.style.border = ""; } }); ``` 这样，当用户选中或取消选中多选框时，它的样式会相应地改变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值