用css改变默认select下拉框的样式

修改默认select下拉框样式；

默认下拉框示例

html部分

css部分

chrome浏览器展示样式

第一步：

修改css清除下拉框的默认样式

#test{width: 200px;height: 30px;display: block;margin: 200px auto;
/*清除默认样式*/
appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;}
/*清除ie下面的默认样式*/
select::-ms-expand{display:none;}

第二步

添加背景图片调整位置

效果图