阅读 516

利用纯 CSS3 定制单选/多选框样式

写于 2016.01.20

在前端开发中,往往需要对默认元素的样式进行修改。然而有的元素却不是那么容易就能找到它所对应的样式的,今天要讨论的重点内容就是<input type="checkbox">以及<input type="radio">这两款默认表单元素的样式修改问题。


我们以复选框<input type="checkbox">为例子。 在webkit内核浏览器如chrome中,复选框未选中的默认样式如下图:

选中以后如下图:

嗯,是挺丑的…… 如果我们想对它进行样式的修改,应该怎么办呢?按照常规,我们现查看一下它的默认样式都有一些什么属性:
user agent stylesheet,也就是浏览器的默认样式里面,它的属性并不复杂,都是我们常见的内容。我们可以通过覆盖这些样式去修改它的大小,颜色,边框等等。但是它中间的钩子,似乎并没有能够直接覆盖修改的样式。真的是这样吗?

我们注意到,有一个比较不常见的属性,-webkit-appearance,直译过来就是“webkit的样子”,似乎和webkit内核浏览器的样式定制有关?我们现了解一下这是啥属性。在w3cschool里面,我们可以看到下面的解释:

定义和用法 appearance 属性允许您使元素看上去像标准的用户界面元素。 默认值: normal 继承性: no 版本: CSS3 JavaScript 语法: object.style.appearance="button"

浏览器支持 所有主流浏览器都不支持 appearance 属性。 Firefox 支持替代的 -moz-appearance 属性。 Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

appearance: normal|icon|window|button|menu|field; 和猜想的一样,它确实和样式的定制有关。但是解释里面只摘录了“把某元素变成另外一种元素的样子”,却没有告诉我们怎样才能“把复选框里面的√”变成“×”。 别急,我们先试一下修改这个属性:

简单粗暴的把样式直接设置为none,看看效果:
它不见了!! 等等,这是不是可以意味着,我们可以对它进行(惨无人道的)完全的自定义样式呢?比如我们想把它默认的“√”变成别的东西。 font-awesome是一套很漂亮的字体图标,现在我想把它的图标放在这个复选框里面。


首先引入font-awesome的css文件,不多说。

然后我们先把这个复选框“未选中状态”设置样式:

input[type=checkbox] {
		display: inline-block;
	    height: 20px;
	    width: 20px;
	    border: 1px solid #000;
	    overflow: hidden;
	    vertical-align: middle;
	    text-align: center;
	    -webkit-appearance: none;
	    font: normal normal normal 14px/1 FontAwesome;
	    outline: 0;
	    background: 0 0;
	}
复制代码

以上代码是为复选框未选中状态设置了宽高,边框背景等样式,注意这里的重点有两个,其一是我们已经讨论过的-webkit-appearance,把它设置为none的原因就是把它整个抹掉,我自己来画的意思。其二是font: normal normal normal 14px/1 FontAwesome,它为这个复选框定义了字体属性,为接下来的引用font-awesome作前提。 现在它长这样:

接下来我们来定义“选中”的样式,我们可以通过:before或者:after伪元素实现。

因为我们已经把它利用-webkit-appearance把所有样式都抹除了,包括中间的“√”,所以我们完全可以自己画一个,伪元素是非常好用的一个方法。 input[type=checkbox]:checked:after { content: '\f00c'; font-size: 15px; text-align: center; line-height: 17px; color: #000; } 这里的content: '\f00c'是来自font-awesome的图标字体编号,具体的查找可以到其官网,或者简单粗暴地在官网例子中打开控制台查看,比如这样:

走到这一步,我们已经大功告成了,赶快来看看效果!

美美哒! 到此,我们完成了全部的通过纯CSS3为默认复选框设置样式的任务。 其他的如按钮,单选框同理~ 由于时间有限,暂时未在火狐和Safari浏览器测试,如果有测试过的同学欢迎在楼下评论交流哈!由于兼容性有限,这个定制的方案可作为参考,具体的使用还是得看场合需求。

欢迎关注我的个人前端技术博客:jrainlau.github.io/

Thanks for reading, see ya next time!

关注下面的标签,发现更多相似文章
评论