删除 IE 上的选择箭头答案

【问题标题】：Remove Select arrow on IE删除 IE 上的选择箭头
【发布时间】：2013-12-08 09:48:31
【问题描述】：

我有选择元素，我想删除箭头，然后我可以添加其他图标.. 我可以为 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;
 }

在 IE9 上查看 Fiddle。我需要的只是删除 ie9 中的箭头请JSFIDDLE回答。

【问题讨论】：

这可能根本不可能。浏览器（尤其是 IE）历来不愿意为其小部件提供扩展样式选项。
你不能只用 CSS 做到这一点，但我相信有 JS 库可以做到这一点。谷歌应该知道。
@Alberto 这个问题已经在 2 年前回答了 :) 如果你认为你有答案，你可以插入它
Select removing dropdown arrow的可能重复

标签： html css html-select

【解决方案1】：

在 IE9 中，@Spudley 建议使用purely a hack 是可能的。由于您已经自定义了 div 和 select 的高度和宽度，因此您需要更改 div:before css 以匹配您的。

如果是IE10，那么使用css3以下是可能的

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

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

【讨论】：

@Moath Howari 我修改了你的小提琴，在 IE9 中检查jsfiddle.net/kBWYd/6
@PraveenJeganathan Selectbox 也有一个错误。当我们单击下拉列表的右上角时，它不起作用。我们可以为此做点什么吗？
@Praveen 的事情是，那么右侧是不可点击的。
@ManjitSingh 和 Tom Roggero - 这很 hacky，但如果您需要可点击的空间，您可以将 display: none; 替换为 opacity: .01。几乎不可能看到它，但它仍然可以点击。
@MarcRoussel 基于这个fiddle 这可以写成select:hover::-ms-expand 伪元素的悬停状态如提到的selector:state::pseudo。我无法使用 IE 进行测试，但值得一试:)

【解决方案2】：

我建议您可以找到in this GitHub repo 的我的解决方案。 这也适用于 IE8 和 IE9，带有来自图标字体的自定义箭头。

Examples of Custom Cross Browser Drop-down 实际操作：使用所有浏览器检查它们以查看跨浏览器功能。

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

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) 的下拉箭头

这是更难的部分......也许不是。

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

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

之后，HTML 中的每个select 都必须用div（或任何可以包装元素的标签）包装。在这个包装器中，只需添加包含图标字体的类。

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

简单来说，这个包装器是用来模拟select标签的。

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

请注意，我们不能使用 select 边框，因为我们必须隐藏默认箭头，使其比包装器延长 25%。因此，它的右边框不应该是可见的，因为我们通过应用到 select 本身的 overflow: hidden 规则将这 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 规则中更改它或自己制作一个新的图标字体文件。

【讨论】：

【解决方案3】：

如果你想使用类和伪类：

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

【讨论】：