html原生select改造箭头及文字左右居中的一种办法
2016-05-01 16:56
549 查看
使用过原生select做网页开发的人,一定会对select的两个问题痛心疾首,一是箭头没办法使用css改造,二是显示文字没办法左右居中。
首先,如果你有足够时间的话,请改用jquerymobile。jquerymobile提供了移动端非常强大的各种控件。对select除了基本css改造外,还支持选项的分组、多选等各种样式。
其次,使用div模拟,网上有较多的使用div+css模拟select的案例,可以找来参考。
最后,如果你对前端开发不熟,而且又想偷懒的话,可以采用本文中的土鳖方法。
apperance属性可以改观元素的外观,加上这段css后,select元素就没有了边框、箭头和背景。appearance属性还可以使用元素显示出别的控件样式,例如button或者listbox。
接下来使用自定义的箭头放到select之上就可以了,可以将箭头盖在select之上,麻烦的是要考虑布局和事件的问题。
如果对箭头的要求比较不高,可以使用<b></b>标签,<b>本来是用于给文字加粗的,但如果文字是空的话,其border属性可以模拟一个箭头效果出来。
参见上述css,<b>标签的border属性,只有最上方设置成白色,其他三个方向上的颜色和select背景一样,这样,就可以呈现出来。另外,这种办法因为是对文本的修饰,所以并不会影响select属性的点击事件。效果如下图:
只要通过js计算出select的宽度和文字的宽度,得到缩进距离,就能实现文字居中了。
select的宽度很好计算,关键是文字的宽度怎么办呢?div是不能测量文字长度的,<span>刚好就可以,所以很简单,在页面某个位置放一个display:none的span标签,文字属性设置和select文字属性完全一样,塞上一两个汉字,专门用来测量文字宽度。
博主就是通过这样的土鳖办法来解决的。在实际操作中,发现<span>测量出来的文字宽度和select下用到文字宽度有一丢丢差异,肉眼观察还是能觉察到的。估计是<span>和select字体没能设置到完成相同,搞不清楚原因在哪。博主直接将测试的文字宽度乘以一个系数(例如1.1),调整到差不多一致。
前端路长,坑多,还是要多下功夫!
首先,如果你有足够时间的话,请改用jquerymobile。jquerymobile提供了移动端非常强大的各种控件。对select除了基本css改造外,还支持选项的分组、多选等各种样式。
其次,使用div模拟,网上有较多的使用div+css模拟select的案例,可以找来参考。
最后,如果你对前端开发不熟,而且又想偷懒的话,可以采用本文中的土鳖方法。
改造箭头
博主在开发微信上的H5应用时 ,发现border:none和background:none在微信浏览器里面是无效的。在网上找到一个办法,直接清除了select的样式:appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari 和 Chrome */
apperance属性可以改观元素的外观,加上这段css后,select元素就没有了边框、箭头和背景。appearance属性还可以使用元素显示出别的控件样式,例如button或者listbox。
接下来使用自定义的箭头放到select之上就可以了,可以将箭头盖在select之上,麻烦的是要考虑布局和事件的问题。
如果对箭头的要求比较不高,可以使用<b></b>标签,<b>本来是用于给文字加粗的,但如果文字是空的话,其border属性可以模拟一个箭头效果出来。
<select class="some"></select> <b></b>
select { width: 60%; height: 40px; background-color: rgb(246, 171, 138); appearance: none; -moz-appearance: none; -webkit-appearance: none; } b { border-color: #FFF rgb(246, 171, 138) rgb(246, 171, 138); border-style: solid; border-width: 4px; position: absolute; top: 36px; margin-left: -22px; }
参见上述css,<b>标签的border属性,只有最上方设置成白色,其他三个方向上的颜色和select背景一样,这样,就可以呈现出来。另外,这种办法因为是对文本的修饰,所以并不会影响select属性的点击事件。效果如下图:
文字左右居中
select标签的另外一大难题就是文字的左右居中问题,text-align:center不起作用。幸运的是,有一个属性对select还是有效的,这就让我们操作文字居中有了可能。这个属性就是text-indent,文字缩进。只要通过js计算出select的宽度和文字的宽度,得到缩进距离,就能实现文字居中了。
select的宽度很好计算,关键是文字的宽度怎么办呢?div是不能测量文字长度的,<span>刚好就可以,所以很简单,在页面某个位置放一个display:none的span标签,文字属性设置和select文字属性完全一样,塞上一两个汉字,专门用来测量文字宽度。
博主就是通过这样的土鳖办法来解决的。在实际操作中,发现<span>测量出来的文字宽度和select下用到文字宽度有一丢丢差异,肉眼观察还是能觉察到的。估计是<span>和select字体没能设置到完成相同,搞不清楚原因在哪。博主直接将测试的文字宽度乘以一个系数(例如1.1),调整到差不多一致。
前端路长,坑多,还是要多下功夫!
相关文章推荐
- innerHTML、getElementsByName()、getElementsByTagName()
- HTML学习小结
- html中音频和视频
- html 特效 切换页面的显示标题
- 2.html的基本结构
- 可以放在html代码中的自动跳转代码
- 可以放在html代码中的自动跳转代码
- HtmlAgilityPackage XPath学习
- HTML特殊编码转换
- HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析
- HTML基本知识
- HTML 列表详解
- HTML中的超链接<a>使用
- HTML笔记
- HTML表格标签
- html基础笔记
- HTML的实体符号
- 百度地图 API 使用
- XHTML总结
- 【.NET】使用HtmlAgilityPack抓取网页数据