如何巧用css模拟checkbox和radiobox

2018-10-07 11:09:00 1740 3 编辑:深正互联 来源:互联网

一、背景

熟悉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);

}


这种方法实现有点儿就是兼容性特别的好,而且比较灵活

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询