很常见的问题,也有许多人写过类似的文章,自己写来记录下

css代码如下:

#myCheck + label,.myRadio + label{
width:16px;
height:16px;
border:1px solid #09c;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 15px;
font-size: 12px;
} #myCheck + label{border-radius: 3px;}
.myRadio + label{border-radius: 50%;} #myCheck:checked + label:after,.myRadio:checked + label:after{color:#09c;}
#myCheck:checked + label:after{content:"✔";} .myRadio:checked + label:after{content:"●";}

dom结构如下:

<input type="checkbox" id="myCheck">
<label for="myCheck"></label> <input type="radio" class="myRadio" id="myRadio1" name="test">
<label for="myRadio1"></label> <input type="radio" class="myRadio" id="myRadio2" name="test">
<label for="myRadio2"></label>

效果如下:

需要注意的是:

1、label需要写在 input 后面,因为 label 的样式是根据input设置的

2、隐藏ijnput的时候不要使用 display:none ,因为这样会把它从键盘 tab 键切换焦点的队列中完全删除,可以设置宽高为0,或者定位移出页面显示区域,或者设置 opacity:0 或者使用裁剪等等任何你想到的合适的方法

本文只是简单写了下实现的思路和方法,项目中 label 可以设置背景图片,甚至由于框架流行,很多人更倾向不使用 ckeckbox 或者 radio ,而是用其他元素替代,用状态去控制元素的样式

如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

css自定义checkbox和radio样式的更多相关文章

  1. 自定义checkbox, radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  2. 自定义checkbox, radio样式总结

    任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...

  3. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  4. css input checkbox和radio样式美化

    参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...

  5. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  6. html自定义checkbox、radio、select —— checkbox、radio篇

    前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...

  7. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  8. html自定义checkbox、radio、select —— select篇

    上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...

  9. 表单:checkbox、radio样式(用图片换掉默认样式)

    checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...

随机推荐

  1. 剑指offer(26)二叉搜索树与双向链表

    题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 题目分析 要生成排序的双向列表,那么只能是中序遍历,因为中序遍历才能从小到 ...

  2. jQuery实现淘宝购物车小组件

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...

  3. 全局解释器锁GIL & 线程锁

    1.GIL锁(Global Interpreter Lock) Python代码的执行由Python虚拟机(也叫解释器主循环)来控制.Python在设计之初就考虑到要在主循环中,同时只有一个线程在执行 ...

  4. Failed to auto-configure a DataSource: 'spring.datasource.url' is not specified and no embedded datasource could be auto-configured.

    从报错信息中,我们就可以分析出错误原因是触发了数据源的自动化配置,然而当前项目其实并不需要数据源.查其根源是依赖方提供的API依赖中引用了一些多余的依赖触发了该自动化配置的加载. 如何解决 为了解决上 ...

  5. 【转载】URL编码与两次encodeURI

    当使用地址栏提交查询参数时,如果不编码,非英文字符会按照操作系统的字符集进行编码提交到服务器,服务器会按照配置的字符集进行解码,所以如果两者不一致就会导致乱码. encodeURI函数采用UTF-8对 ...

  6. HDU 2612 (2次BFS,有点小细节)

    Problem Description Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. L ...

  7. 连手机logcat,出现read:unexpected EOF

    使用logcat时,出现: 网上搜原因解释为log太多,普遍的解决方法是: adb logcat -G 20m 根本解决方法推荐:开发者设置,增大log size

  8. "她等待刀尖已经太久"--茨维塔耶娃诗抄

      生活   1 你无法夺走我的红晕—— 它强大——如同河水的汛潮! 你是猎人,可我不会上当, 你若追逐,我就会逃跑.   你无法夺走我鲜活的灵魂! 就这样,在急遽的追逐中—— 一匹阿拉伯的骏马, 微 ...

  9. zzw原创_非root用户启动apache的问题解决(非root用户启动apache的1024以下端口)

    场景:普通用户编译的apache,要在该用户下启动1024端口以下的apache端口 1.假设普通用户为sims20,用该用户编译 安装了一个apache,安装路径为/opt/aspire/produ ...

  10. Winform关于未找到元数据文件.exe和不包含适合于入口点的静态“Main”方法

    在三层架构中ItcastCaterModel项目是被其他项目引用的,所以输出类型为类库.