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

修改默认select下拉框样式;

默认下拉框示例

html部分

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

css部分

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

chrome浏览器展示样式

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

第一步:

修改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;}用css改变默认select下拉框的样式

第二步

添加背景图片调整位置

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

效果图

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