前言
我经常遇到这样的情况:UI设计了一个下拉列表,它和原生的下拉列表的样式相差很大。以前pc端,我都是自己重新写一个下拉列表。但是,我们都知道select在移动端所表现出来的交互行为和pc端有很大的差异。而且,ios和安卓所表现出来的样式也不同。综上,如果我们要用JS实现select,那么开发成本就太大了。因此,最近就开始研究如何在使用select标签的情况下改变它的默认样式,设置我们自己想要的样式。
一、select下拉列表
1.在众多表单中,select标签PC端和移动端的差异最大,以下是select标签在不同终端所表现出来的差异。
1.PC端select的交互行为,如图所示:
2.移动端select的交互行为,如图所示:
安卓:
ios:
注:这里的差异指的是点击后所表现的交互。而我想要实现的是如何使用css改变点击select标签之前select标签的样式。
举个例子:
select的默认样式,图a:
psd图中的样式,图b:
这篇文章要解决的就是如何让图a变成图b。哎呀妈呀,终于说清楚自己要干嘛了!
补充:但是在现实需求中,我们会遇到一些意想不到的情况。
比如:在option中必须添加其它的标签。然而,option中的标签在浏览器中看不见的,它只会保留文本内容。因此遇到这种情况,就必须用js来模拟select了。以下,给出相应的完整案例。
1 |
|
显示效果如图所示:
2.如何在使用select标签的情况下,改变它的默认样式?
1.清除select下拉框默认样式
1 | select{ |
2.禁用select默认箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰
1 | select::-ms-expand { display:none; } |
3.根据psd图修改样式
3.存在的问题
当使用背景图片或者代码实现的小三角来代替默认select标签的下拉箭头时,一般使用定位。然而,我们点击这部分区域并不会触发select标签。因此,需要使用属性pointer-events: none,让小三角实体“虚化”。之后,我们点击这部分区域后,它就相当于没有了,最终会触发select标签。
1 | pointer-events: none; |
4.完整例子
1 |
|
二、单选框和复选框
单选框和复选框差不多,这里以单选框为例。
1.单选框默认样式比较难看,改变样式是必须的。
单选框默认样式,图1:
psd图中的样式,图2:
2.如何在使用<input type="radio">
的情况下,改变其默认样式?
1.清除input默认样式
1 | input{ |
2.禁用radio和checkbox默认样式,::-ms-check修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰
1 | input[type=radio]::-ms-check, |
3.根据psd图修改样式
3.完整例子
1 |
|
最终的效果如图所示:
三、上传图片按钮(input[type=’file’])美化
1.上传图片按钮默认样式比较难看,改变样式是必须的。
input[type=’file’]默认样式,图1:
psd图中的样式,图2:
2.例子
1 | <style> |
注意:
<input type="file" >
这个控件在ie,firefox,chrome下表现的都不一致。它的高度是可以控制的,但宽度不能,只能用font-size去控制。