如何利用添加伪元素的办法自定义checkbox以及radio选框的样式

最新推荐文章于 2022-04-08 23:32:41 发布
最新推荐文章于 2022-04-08 23:32:41 发布
阅读量187 收藏
点赞数
原文链接：http://www.cnblogs.com/stuartrealm/p/10590964.html
版权

这里我以checkbox举例(radio同理)，上图为默认样式

 

这是我修改之后的样式

直接进入主题吧

首先在我们的vs里面输入如上代码

键入一个input框，类型为checkbox

再写一个label，给for属性赋予checkbox的ID值，让两个产生联动

这样，我们点击label里面的内容的时候，可以让checkbox选中

 

然后我们给label新建一个伪元素

 

 设置好之后我们得到如下样子

现在我们点的时候是没有任何变化的，因为我们并没有设置点击之后的样式

我们输入以下代码

 

 为了使我们的选择器能选中label下的伪元素，我们需要调整代码

将label放在input之后，我们的选择器就能选中label下的伪元素了

这样我们实现了用伪元素自定义样式，这样的做的好处就是我们可以改变checkox和radio的颜色

不至于使用默认的样子

例如以下

大家可以来try一try哦~~~~~~~~~~~~~

 

转载于:https://www.cnblogs.com/stuartrealm/p/10590964.html

angpianqian3541
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css关于伪类、伪元素实现checkbox，radio默认样式的修改
呀呀呀
12-28 415
label{ display: inline-block; width: 14px; height: 14px; border: 1px solid #dcdee2; border-radius: 3px; font-size: 0; overflow: hidden; } label:hover{ border-color: #dc...
Js动态添加复选框Checkbox的实例方法
12-07
首先，使用JS动态产生Checkbox可以采用如下类似的语句： 代码如下:var checkBox=document.createElement(“input”);checkBox.setAttribute(“type”,”checkbox”);checkBox.setAttribute(“id”,’123456′);但是，这样产生的checkbox是不带尾后的文字的，如果需要添加，那么需要使用document.createTextNode(‘XXX’)方法来产生一个文本节点，放在checkbox后面。 如下代码，程序产生了一个checkbox和一个文本节点，并将它们放到一个li对象中，再将l
使用伪类和伪元素改变radio,checkbox的样式
11-05 176
今天学习了一下百度前端技术学院的课程,感觉很不错 自定义checkbox， radio样式 核心要点 1.不要显示原有样式 2.充分利用伪元素,让伪元素去显示想要的样式 3.伪元素的content为''(空字符串) 4.利用伪类:checked,可大大简化代码,不使用js,即可让伪元素在checked时显示对应的样式 相关知识点也在以上链接中 以下附上一个学员的代码...
用 input 伪元素做一个复选框
aocang1339的博客
09-11 226
这个方法有兼容性，ie 不兼容 html <div class="real_input"> <!--复选框--> <label class="checkBox"><input type="checkbox"></label> </div> css /*复选框*/ .real...
CSS - 利用伪元素修改checkbox样式
FantasyWeirdo的博客
01-06 597
&lt;div class="label_rem"&gt; &lt;input type="checkbox" name="moren" id="checkbox_aa" class="remember" /&gt; &lt;label for="checkbox_aa"&gt;&lt;/label&gt;&lt;
利用伪元素before实现自定义checkbox样式
weixin_30781433的博客
05-06 385
原理：label标签的for属性可以将文字与复选框进行关联，点击文字可以同时将复选框选中。 隐藏checkbox标签，利用label标签的before伪元素来实现自定义样式。设置before伪元素的边框border属性实现复选框的外框，before伪元素的content值可为unicode字符集，这样就可以设置checkbox中选中状态，可以实现勾选效果、五角星效果、多边形效果等等。 代码： ...
利用纯CSS自定义Checkbox和Radio的样式示例代码
12-29
我们可以利用CSS3的一些属性来实现自定义checkbox & radio样式。 HTML 代码 // radio input <div class=radio> <input id=male type=radio name=gender value=male> <label for=male>Male <input id=...
jQuery实现自定义checkbox和radio样式
10-23
主要介绍了jQuery实现自定义checkbox和radio样式的相关资料,需要的朋友可以参考下
控制input的CSS但不影响CheckBox以及Radio的样式
12-12
但是checkbox radio等也会随着变化了,往往就是这两样控件显示的很不如人意,就想:要是 能有一种可以改变其他input控件的样式而不影响checkbox和radio的方法就好.在网上找了 很久都没有找到合适的代码:无非就是增加一...
伪类和伪元素（以复选框为例）
小瑾沐晚风的博客
11-06 185
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 伪对象选择符 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式。 1 :first-line 向文本的首行添加特殊样式...
通过伪元素实现修改 input[text="checkbox"] 选择框的浏览器默认样式
baidu_28647571的博客
09-21 285
通过伪元素实现修改 input[text="checkbox"] 选择框的浏览器默认样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="tex...
document.createElement("input")动态创建html元素时checkbox
ChocooM
12-17 655
最近研究createElement的时候发现一个奇怪的问题 var echkbox=document.createElement("input"); echkbox.setAttribute("type","checkbox"); echkbox.setAttribute("id","inputid"); echkbox.setAttribute("name","in
伪类与伪元素
qq_35134066的博客
03-27 624
文章目录伪类与伪元素比较常见伪类常见伪元素 伪类与伪元素比较 伪类 伪元素 使用: 使用::，为了兼容也可以使用: 代表元素的某个状态信息 表示元素的某个部分，通常是实际存在的 常见伪类 通用 :hover :root 锚点相关 :link :active :visited 元素相关 :empty :only-child :only-of-type :not() :first-child :first-of-type :last-child :last-of-type :n
单选框radio和复选框checkbox的样式更改：利用伪元素
m0_37922443的博客
07-09 1042
首先要知道的是：单选框radio和复选框checkbox的样式本身是无法更改的，想要自定义样式，必须用到伪元素。 第一步：用span或者i标签来写单选框/复选框。把这个标签放在input的后面，并且用label将两者包裹起来。 <label class="radio">黑名单模式 <input type="radio" name="mode" value="1"> <i></i> </label> <
css使用伪元素改变checkbox勾选的样式
想飞的猪的博客
06-26 3580
什么是伪元素：伪元素不是真正的元素，不存在与文档之中，所以js无法操作他。那为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。 怎样表示伪元素?最好使用双冒号，防止与伪类混淆。 content是伪元素必需的属性，其内容可以分为几类：字符串/attr/url/counter(计算器)。若伪元素没有内容，需赋值为空格： 直接看源代码，里面包含注释，   &lt;!DOCTYP...
vue动态样式绑定改变伪元素等特殊样式(css var函数)
热门推荐
一只前端小菜鸟
01-21 2万+
改变样式是我们实际开发中最常做的事情。 诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。 诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。 那么，在vue中，我们更能很轻松的达到这点。 看下常见的几种情景： 情景一：我们需要根据某个变量是否存在（触发），去动态添加样式 描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果 <div ...
自定义单选按钮radio的样式
trigger的博客
12-25 1万+
如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。 很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当&lt;label&gt;元素与单选按钮关联之后，也可以起到触发开关的作用。 思路： 1....
火狐下input type=radio样式不能修改问题
weixin_34261415的博客
05-04 597
开发中，会遇到在谷歌中input type=radio点选没有反应，在火狐中input type=radio样式不能修改的问题，这里有个小窍门: <label class="lab"><input name="addup_flag" type="radio" value=“1” />是</label&gt...
原生JS在DIV下添加label标签，label里面再添加input
a1028697753的博客
04-08 3786
原生JS动态在创建一个label然后在里面再添加一个font，最后在添加到指定id的div里面
自定义checkbox样式
最新发布
05-18
在这个例子中，我们使用了一个隐藏的原始 checkbox，并创建了一个自定义的样式。当 checkbox 被选中时，我们使用 CSS 选择器 `:checked` 来改变它的样式。我们还对 checkbox 所在的标签进行了样式定义，以使它们更加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值