一、背景
熟悉HTML的朋友都知道,对于原生的checkbox和radiobox,各个设备渲染是不一样的,就比如windows和mac的渲染风格就相差很多,windows的看起来很挫的样子,有木有?而在实际工作中,设计师经常会要求统一各端显示样式,对于原生的checkbox和radiobox没有太多支持的样式调整,最多改改高宽,就算勉强改了,兼容性也会出各种问题,出于各方面考虑,只能选择用一些特殊的方法来模拟radiobox和checkbox,那么如何模拟呢?在这之前我们先回顾一下css的选择器。
二、CSS选择器
1、元素选择器,这应该是CSS中最常见的选择器了,该选择器通常是指某种HTML元素的标签,一个HTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应选择使用标签选择器。
div {color:#f00; border:1px solid #00f;}
p {color:#000;}
2、类选择器,元素选择器可以为整个HTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,HTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。
.test {color:#f00; border:1px solid #00f;}
3、ID选择器,ID选择器和类选择器有些类似,但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类,一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次,也就是一个ID只能唯一标识一个元素(不是一类元素,而是一个元素),也就是说ID选择器获取到的独一无二的一个元素。
#test {color:#f00; border:1px solid #00f;}
4、属性选择器,如果我们希望根据属性值来选择元素,我们可以简单的通过属性选择器来获取对应的元素,比如我们可以将所有type为text的input标签设置统一样式
input[type="text"] {color:#f00; border:1px solid #00f;}
5、父子选择器,选择某元素瞎 main的某一标签,比如类名content的div下所有的li标签
.content li {color:#f00; border:1px solid #00f;}
6、伪类选择器,比如我们可以为a标签中激活的、访问过的、打开时,hover时分别设置不同的样式
a:link {color:green; font-size: 50px}
a:hover {color:pink; font-size: 50px}
a:active {color:yellow; font-size: 50px}
a:visited {color:red; font-size: 50px}
7、兄弟选择器,便于我们选择相邻的元素,比如10个元素,我们想对除了第一个之外的其他li元素都设置一个距左的margin,我们可以这样写
li + li { margin-left: 10px; }
三、模拟checkbox和radiobox
讲完了CSS选择器,我们继续回到模拟checkbox和radiobox这个话题上,这个时候我们可以有两种选择
1、使用伪类选择器
HTML:
<input type="checkbox" />
input[type=checkbox] {
position: relative;
width: 10px;
height: 1px;
}
input[type=checkbox]::before{
content:'';
position: absolute;
top: -5px;
left: -5px;
width: 22px;
height: 22px;
line-height:22px;
text-align: center;
font-size:16px;
background-image: url(check.png);
border-radius: 4px;
}
input[type=checkbox]:checked::before {
background-image: url(check_checked.png);
}
这种方法实现有点儿就是兼容性特别的好,而且比较灵活
深圳 · 龙岗 · 大运软件小镇22栋201
电话:400 182 8580
邮箱:szhulian@qq.com