css自定义checkbox和radio样式
很常见的问题,也有许多人写过类似的文章,自己写来记录下
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样式的更多相关文章
- 自定义checkbox, radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- 自定义checkbox, radio样式总结
任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
- html自定义checkbox、radio、select —— checkbox、radio篇
前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...
- input美化 checkbox和radio样式
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...
- html自定义checkbox、radio、select —— select篇
上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...
- 表单:checkbox、radio样式(用图片换掉默认样式)
checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...
随机推荐
- 王之泰201771010131《面向对象程序设计(java)》第七周学习总结
王之泰201771010131<面向对象程序设计(java)>第七周学习总结 第一部分:理论知识学习部分 第五章 第五章内容深度学习: 继承:如果两个类存在继承关系,则子类会自动继承父类的 ...
- 在新获取git中项目时出现的问题汇总
新下拉git项目,今天遇到的问题,因为刚配置实用jdk和idea,所以有可能在打开springboot项目时查看mysql数据库驱动显示为红色. 之后看到pom文件也没有错,最后发现才是在项目中还没有 ...
- Globecom 2018 投稿过程
Globecom 2018 投稿过程 IEEE 通信领域旗舰型会议 Globecom 2018 将于近日提交 Camera-Ready 稿件.回顾今年投稿过程,虽麻烦不断但也不算特别曲折,本篇随笔记录 ...
- 『Python CoolBook』C扩展库_其二_demo演示
点击进入项目 C函数源文件 /* sample.c */ #include "sample.h" /* Compute the greatest common divisor */ ...
- 第一次作业——WorkCount
项目地址:https://gitee.com/yangfj/wordcount_project 1.软件需求分析: 撰写PSP表格: PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) ...
- [hdu P4081] Qin Shi Huang’s National Road System
[hdu P4081] Qin Shi Huang’s National Road System Time Limit: 2000/1000 MS (Java/Others) Memory Li ...
- FileWriter向文件中写入内容
1.创建fileWriter对象 2.写入文件信息 3.关闭流 必须关闭流,否则将不能写入文件中 /** * * @author Administrator * 文件写入对象的使用 * */ publ ...
- centos7 安装MySQL7 并更改初始化密码
1.官方安装文档 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 2.下载 Mysql yum包 http://dev.mysql.co ...
- python avro 数据格式使用demo
{"name": "UEProcedures", "type": "record", "fields" ...
- Excel遇到的坑lookup和vlookup的用法
lookup (第一种) lookup必选保证有序查询,学籍号是按顺序排的 如上表格,表格2的成绩输入到表格1成绩中 鼠标选择F3->公式->插入函数->搜索lookup 三个参数 ...