默认下拉框select美化

默认的select下拉框，样子丑，并且在各个浏览器的样子还不一样。所以需要美化。当然，要完全兼容的话，改起来会很费事，这时就建议你自己模拟了，或找相关插件。比如jquery插件啊，js插件等等. 这里主要介绍默认下拉框美化方法。

思路：
重置select 默认下拉框样式，用自定义的图片覆盖默认下拉三角按钮。如果低版本ie9以下的话，建议套个外层div（overflow-x: hiddden），让select超出外层宽度隐藏。

关键代码：

dom结构：

<div class="button custom-select">
  <select>
    <option value="选择1" selected="selected">Connecticut</option>
    <option value="选择2">New York</option>
    <option value="选择3">Maryland</option>
    <option value="选择4">Virginia</option>
  </select>
</div>

css：

select{    
  border: solid 1px #ccc;    
  appearance: none;/*清除select下拉框默认样式*/    
  -moz-appearance: none;    
  -webkit-appearance: none;   
  padding-right: 14px;/*为下拉小箭头留出一点位置，避免被文字覆盖*/    
  background: url("img/arrow.png") no-repeat scroll right center transparent;/*自定义图片覆盖原有的下三角符号*/
}
select::-ms-expand {    
  display: none;/*清除IE默认下拉按钮，但是测试发现IE10以上有效，IE8，9默认下拉按钮仍旧存在*/
}

参考：

• 用纯css改变下拉列表select框的默认样式
• 修改select默认样式，兼容IE9
• 移动端关于select最佳兼容性解决方案(css)