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"></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），调整到差不多一致。

前端路长，坑多，还是要多下功夫！