html原生select改造箭头及文字左右居中的一种办法

使用过原生select做网页开发的人，一定会对select的两个问题痛心疾首，一是箭头没办法使用css改造，二是显示文字没办法左右居中。

首先，如果你有足够时间的话，请改用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"></se