删除IE上的select箭头
我有select元素，我想要删除箭头，然后我可以添加其他图标..我可以做的火狐浏览器和Chrome浏览器，但是这不适用于IE9 。
.styled-select select { border: 0 !important; /*Removes border*/ -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /*Removes default style Firefox*/ background: url('select_icon.png') no-repeat; background-position: 179px 7px; text-indent: 0.01px; text-overflow: ""; color: #FCAF17; width:200px; } 在IE9 上看小提琴 。 所有我需要的是删除ie9中的箭头请JSFIDDLE答案。
在IE9中，根据@Spudley的build议， 完全可能是黑客 。 既然你已经定制了高度和宽度的div和select，你需要改变div:before CSS div:before匹配你的。
如果是IE10，那么使用下面的css3是可能的
select::-ms-expand { display: none; }
但是，如果你对jQuery插件感兴趣，可以试试Chosen.js或者你可以在js中创build自己的。
我会build议我的解决scheme，你可以在这个GitHub回购find。 这也适用于IE8和IE9自定义箭头来自图标字体。
自定义跨浏览器示例下拉式操作：查看所有浏览器以查看跨浏览器function。
无论如何，让我们从现代浏览器开始，然后我们将看到较老的解决scheme。
Chrome，Firefox，Opera，Internet Explorer 10+的下拉箭头
对于这些浏览器，很容易为下拉菜单设置相同的背景图像以获得相同的箭头。
为此，您必须重置浏览器的select标签的默认样式，并设置新的背景规则（如之前所build议的）。
select { /* you should keep these firsts rules in place to maintain cross-browser behaviour */ -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; background-image: url('<custom_arrow_image_url_here>'); background-position: 98% center; background-repeat: no-repeat; outline: none; ... }
appearance规则设置为无，以重置浏览器默认的，如果你想要每个箭头有相同的方面，你应该保持原地。
示例中的background规则使用代表不同箭头的SVG内嵌图像进行设置。 他们从左侧定位98％，以保留一些边界到右边界（你可以很容易地修改位置，如你所愿）。
为了保持正确的跨浏览器行为，必须保留的唯一其他规则是outline 。 该规则重置单击元素时出现的默认边框（在某些浏览器中）。 所有其他的规则，如果需要可以很容易地修改。
使用图标字体的Internet Explorer 8（IE8）和Internet Explorer 9（IE9）的下拉箭头
这是更难的部分…或者可能不是。
没有标准规则来隐藏这些浏览器的默认箭头（如IE10 +的select::-ms-expand ）。 解决办法是隐藏包含默认箭头的下拉菜单的部分，并插入与其他浏览器中使用的SVG类似的箭头图标字体（或者SVG，如果您喜欢的话）（请参阅select CSS规则关于内联SVG的更多细节）。
第一步是设置一个可以识别浏览器的类：这就是为什么我在代码的开头使用条件IE IF的原因。 这些IF用于将特定的类附加到html标签以识别较早的IE浏览器。
之后，HTML中的每个select都必须由div （或者可以包装元素的任何标签）包装。 在这个包装只是添加包含图标字体的类。
<div class="selectTagWrapper prefix-icon-arrow-down-fill"> ... </div>
简而言之，这个包装器被用来模拟select标签。
为了像下拉菜单那样工作，包装必须有边框，因为我们隐藏了来自select的边框。
请注意，我们不能使用select边框，因为我们必须隐藏默认箭头，比包装更长25％。 因此，它的右边框不应该是可见的，因为我们隐藏这25％多的overflow: hidden应用于select本身的overflow: hidden规则。
自定义箭头图标字体放置在伪类中:before规则content包含箭头的引用之前（在这种情况下，它是右括号）。
我们也把这个箭头放在一个绝对的位置，尽可能地居中（如果你使用不同的图标字体，记得通过改变左右值和字体大小来适时调整它们）。
.ie8 .prefix-icon-arrow-down-fill:before, .ie9 .prefix-icon-arrow-down-fill:before { content: ")"; position: absolute; top: 43%; left: 93%; font-size: 6px; ... }
您可以轻松地创build和replace背景箭头或图标字体箭头，只需要简单地在background-image规则中更改它或自己创build一个新的图标字体文件。
如果你想使用类和伪类：
.simple-control是你的css类
:disabled是伪类
select.simple-control:disabled{ /*For FireFox*/ -webkit-appearance: none; /*For Chrome*/ -moz-appearance: none; } /*For IE10+*/ select:disabled.simple-control::-ms-expand { display: none; }
