自定义input[type="checkbox"]的样式
来源:互联网 发布:淘宝卖家售后服务流程 编辑:程序博客网 时间:2024/06/11 07:22
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现。
如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用。不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。
很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用。当<label>元素与复选框关联之后,也可以起到触发开关的作用。
思路:
1. 可以为<label>元素添加生成性内容(伪元素),并基于复选框的状态来为其设置样式;
2. 然后把真正的复选框隐藏起来;
3. 最后把生成内容美化一下。
解决方法:
1. 一段简单的结构代码:
<input type="checkbox" id="awesome" /><label for="awesome">Awesome!</label>
2. 生成一个伪元素,作为美化版的复选框,先给伪元素添加一些样式:
input[type="checkbox"] + label::before { content: "\a0"; /*不换行空格*/ display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background-color: silver; text-indent: .15em; line-height: .65; /*行高不加单位,子元素将继承数字乘以自身字体尺寸而非父元素行高*/}
现在的样子:
原来的复选框仍然可见,但是我们先给复选框的勾选状态添加样式:
3. 给复选框的勾选状态添加不同的样式:
input[type="checkbox"]:checked + label::before { content: "\2713"; background-color: yellowgreen;}
现在的样子:
4. 现在把原来的复选框隐藏:
input { position: absolute; clip: rect(0, 0, 0, 0);}
现在的样子:
隐藏原来的复选框时,如果使用 display: none; 的话,那样会把它从键盘 tab 键切换焦点的队列中完全删除。
于是可采用剪切的方式,让剪切后的尺寸为零,这样就隐藏了原来的多选框。
延伸
在聚焦和禁用时改变它的样式:
input[type="checkbox"]:focus + label::before { box-shadow: 0 0 .1em .1em #58a;}input[type="checkbox"]:disabled + label::before { background-color: gray; box-shadow: none; color: #555;}
点击后,得到焦点,现在的样子:
阅读全文
0 0
- 自定义input[type="checkbox"]的样式
- 自定义input checkBox的样式
- 自定义input[type="radio"]的样式
- 自定义input[type=”file”]的样式
- 修改 input[type=checkbox] 默认样式
- [JS实例] input type=file 自定义样式的方法
- html自定义input type='file'样式
- 自定义 <input type="file" /> 样式
- 自定义input[type=radio]单选框样式
- 自定义 input type=file样式
- css input[type=file] input[type=radio] input[type=checkbox]样式美化,input上传按钮美化
- CSS input checkbox自定义样式
- css input[type=file] 样式美化 (radio checkbox类似)
- 用css修改input[type=checkbox]时默认样式
- input type="checkbox"
- input type="file" 样式的模仿
- input[type="file"]的样式修改
- input,type="file"的样式修改
- RabbitMQ消息队列(三):任务分发机制
- 字符串格式化 (%操作符)
- Tomcat 启动速度慢,一直转圈的原因
- 推荐系统解决冷启动问题策略
- 深度学习-->NLP-->NNLM简介
- 自定义input[type="checkbox"]的样式
- python_pdb_module
- 推荐系统之概率矩阵分解的详细推导过程(Probabilistic Matrix Factorization,PMF)
- 全程解析Linux鼠标驱动
- RabbitMQ消息队列(四):分发到多Consumer(Publish/Subscribe)
- 使用 ProxySQL 提高 MySQL SSL 的连接性能
- RecyclerView 设置item间隔和随机高度
- emca 262 6.0
- R语言做线性回归