由于 不同浏览器的 select 选项的默认样式不同,为了样式统一性。
则 删去浏览器的默认样式
select.form-control { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ /*border: solid 1px #000;*/ /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background-image:url("../icons/down.png"); background-repeat:no-repeat; background-position:center right; /*background:red ;*/ /*为下拉小箭头留出一点位置,避免被文字覆盖*/ padding-right:14px; }
并同意修改为background-image: url("../icons/down.png");
这样出现一个问题,在ie9 中 ,清除 select 的方法 不成功,依然存在 默认的下拉箭头。这样就导致两个箭头同时存在。
1、采用 ie9的hack 方式,添加 9