删除IE上的选择箭头

我有选择的元素，我想删除的箭头，然后我可以添加其他图标..我能做到这一点的Firefox Safari和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;
 }

SEE 小提琴上的IE9。我所需要的就是删除ie9中的箭头，请JSFIDDLE回答。

在IE9中，如@Spudley所建议的那样，完全有可能被黑客入侵。由于您已自定义div的高度和宽度并进行选择，因此需要更改div:beforecss以使其与您的css相匹配。

如果是IE10，则可以在css3以下使用

select::-ms-expand {
    display: none;
}

但是，如果您对jQuery插件感兴趣，请尝试Chosen.js或您可以在js中创建自己的插件。

我建议您在此GitHub存储库中找到我的解决方案 。 带有来自图标字体的自定义箭头的IE8和IE9也适用。

“自定义跨浏览器”下拉列表的作用示例：使用所有浏览器进行检查，以查看跨浏览器功能。

无论如何，让我们从现代浏览器开始，然后我们将看到较旧版本的解决方案。

Chrome，Firefox，Opera，Internet Explorer 10+的下拉箭头

对于这些浏览器，很容易为下拉菜单设置相同的背景图像，以使其具有相同的箭头。

为此，您必须为select标签重置浏览器的默认样式，并设置新的背景规则（如之前建议的那样）。

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规则设置为none重置浏览器默认的，如果你想为每个箭头相同的外观，你应该让他们在的地方。

background示例中的规则是用表示不同箭头的SVG嵌入式图像设置的。它们的位置是从左侧开始98％，以在右侧边框上保留一些边距（您可以根据需要轻松地更改位置）。

为了维持正确的跨浏览器行为，必须保留的唯一其他规则是outline。此规则重置单击元素时（在某些浏览器中）显示的默认边框。如果需要，可以轻松修改所有其他规则。

使用图标字体的Internet Explorer 8（IE8）和Internet Explorer 9（IE9）的下拉箭头

这是最困难的部分……也许不是。

没有标准规则来隐藏这些浏览器的默认箭头（例如select::-ms-expandIE10 +的）。解决方案是隐藏下拉菜单中包含默认箭头的部分，并插入类似于其他浏览器中使用的SVG的箭头图标字体（或SVG，如果您愿意的话）（select有关更多信息，请参见CSS规则）。有关所使用的嵌入式SVG的详细信息）。

第一步是设置一个可以识别浏览器的类：这就是为什么我在代码开头使用条件IE IF的原因。这些IF用于将特定的类附加到html标签上，以识别较旧的IE浏览器。

之后，selectHTML中的每个内容都必须由包裹div（或任何可以包裹元素的标签）。在此包装器上，只需添加包含图标字体的类。

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

简而言之，此包装器用于模拟select标签。

要像下拉菜单一样工作，包装器必须有边框，因为我们隐藏了来自的边框select。

请注意，我们无法使用select边框，因为我们必须隐藏默认箭头，将其长度加长包装器25％。因此，它的右边界不可见，因为我们根据overflow: hidden应用于select自身的规则将其隐藏了25％。

自定义箭头图标字体位于伪类中: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;
    ...
}

您可以轻松地创建和替换背景箭头或图标字体箭头，只需在background-image规则中对其进行更改，或者自己创建一个新的图标字体文件。

如果要使用类和伪类：

.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;
}