CSS - 选择器应用(自定义复选框 & 单选框)
当CSS 最初出现时,它对表单元素的样式控制力是极为有限的,而且现在仍然没有哪个CSS 规范明确定义了这方面的行为。不过这些年来,各种浏览器已经在逐步放开CSS 属性对表单控件的作用范围,从而允许我们设置大多数表单控件的样式。不幸的是,复选框和单选框不在此列。直到今天,这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type="checkbox"] {
background: blue;
}
</style>
</head>
<body>
<input type="checkbox" id="awesome" checked />
<label for="awesome">自定义复选框</label>
</body>
</html>
先看一下当前的复选框的样式,chorme浏览器默认样式。而且我们定义的背景颜色是没有应用到复选框的样式。但是目前我们想要自定义复选框的样式。
解决方案
通过前一章的学习,我们得到了一个新的伪类:checked。这个伪类只在复选框被勾选时才会匹配,不论这个勾选状态是由用户交互触发,还是由脚本触发。如果直接对复选框设置样式,那么这个伪类并不实用,因为(前面已经交待过了)没有多少样式能够对复选框起作用。不过,我们倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。替换元素和不可替换元素
替换元素
替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select><object>。替换一般有内在尺寸即img默认的是其图片的宽高,input也有默认的尺寸。img和input的宽高可以设定。
不可替换元素
即将内容直接表现给用户端Process
其实有一个元素总是跟复选框形影不离、息息相关,它就是<label>(标签元素)。当<label> 元素与复选框关联之后,也可以起到触发开关的作用。
由于label 不是复选框那样的替换元素,我们可以为它添加生成性内容(伪元素),并基于复选框的状态来为其设置样式。
然后,就可以把真正的复选框隐藏起来(但不能把它从tab 键切换焦点的队列中完全删除),再把生成性内容美化一番,用来顶替原来的复选框!
(1) 首先利用伪元素:bofore添加一个“复选框”
<style>
input[type="checkbox"] + label::before {
content: '\a0'; /* 不换行空格 */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
</style>
可以看到当前的复选框模型已经有了。
(2) 给复选框的勾选状态加上不同的样式。样式可以很简单,比如换种颜色,再加上勾选标记
<style>
input[type="checkbox"] + label::before {
content: '\a0'; /* 不换行空格 */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
input[type="checkbox"]:checked + label::before {
content: '\2713'; /*添加勾选状态*/
background: yellowgreen;
}
</style>
(3) 隐藏原来复选框
我们需要把原来的复选框以一种不损失可访问性的方式隐藏起来。这意味着不能使用display: none,因为那样会把它从键盘tab 键切换焦点的队列中完全删除。我们改用另一种方法来达到目的:
<style>
input[type="checkbox"] + label::before {
content: '\a0'; /* 不换行空格 */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
</style>
延伸:content中的图标问题
在CSS Content里使用特殊的字符有点怪异,需要使用ASCII码,可以查询。请看下图:
上图中可以获取当前的ASCII代码:√,然后在网页中输入ASCII码:然后得到我们的结果。
下面这些比较常用
\2018 - 左单引号\2019 -右单引号
\00A9 - 版权
\2713 - 对号
\2192 - 右箭头
\2190 - 左箭头
上一篇: php获取url里指定位置的参数解决办法
下一篇: 五步轻松实现zTree的使用实例分享
推荐阅读
-
纯css3实现效果超级炫的checkbox复选框和radio单选框
-
一款纯css3实现简单的checkbox复选框和radio单选框
-
荐 纯CSS实现自定义单选框和复选框
-
flex4.5中CSS选择器的应用小结
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
css选择器、可视化格式模型、背景图像效果、对链接应用样式、对表单和数据表格应用样式等知识讲解
-
基于CSS3自定义发光radiobox单选框_html/css_WEB-ITnose
-
单选框和复选框与文本垂直对齐_html/css_WEB-ITnose
-
用jquery与css打造个性化的单选框和复选框_jquery
-
20个时尚的自定义CSS复选框和单选按钮_html/css_WEB-ITnose