通过css修改select下拉列表框的默认样式

实现原理很简单，就是通过把浏览器默认的下拉框样式清除，自定义select样式，再把默认的下拉按钮替换为张向右对齐的小箭头图标即可，具体代码如下。

select {
	/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
	border: solid 1px #000;

	/*很关键：将默认的select选择框样式清除*/
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;

	/*在选择框的最右侧中间显示小箭头图片*/
	background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


	/*为下拉小箭头留出一点位置，避免被文字覆盖*/
	padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

IE9以下浏览器：

IE9以下的旧版本IE浏览器并不支持appearance属性，想要支持的话需要非常特殊的方法： 为其添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见，即可覆盖即小箭头。然后再为父级容器添加背景图片即可。overflow: hidden并不能隐藏下拉框的显示。

HTML代码：

<div id="parent">
  <select>
      <option>what</option>
      <option>the</option>
      <option>hell</option>
  </select>
</div>

#parent {
    background: url('yourimage') no-repeat;
    width: 100px;
    height: 30px;
    overflow: hidden;
}