Question

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

Answer 1

在IE9中，@ Spudley建议使用purely a hack。由于您已自定义div的高度和宽度并选择，因此您需要更改div:before css以匹配您的。{/ p>

如果它是IE10，那么使用下面的css3就可以

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

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

Answer 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。此规则将重置单击该元素时出现的默认边框（在某些浏览器中）。如果需要，可以轻松修改所有其他规则。

使用Icon字体的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％。因此，它的右边框不应该是可见的，因为我们通过应用于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规则中更改它或者自己制作新的图标字体文件。

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

删除IE上的选择箭头

3 个答案:

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

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