Html 删除 IE 上的选择箭头

Remove Select arrow on IE

提问by Muath

I have select element, i want to remove the arrow, then i can add other icon.. i can do that for Firefox Safari and Chrome, but this didn't work on IE9.

我有选择元素，我想删除箭头，然后我可以添加其他图标..我可以为 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 Fiddleon IE9. all what i need is remove the arrow in ie9 Please JSFIDDLE answer.

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

回答by Praveen

In IE9, it is possible with purely a hackas advised by @Spudley. Since you've customized height and width of the div and select, you need to change div:beforecss to match yours.

在IE9中，有可能与纯粹的黑客攻击作为建议由@Spudley。由于您已经自定义了 div 和 select 的高度和宽度，因此您需要更改div:beforecss 以匹配您的 css。

In case if it is IE10 then using below css3 it is possible

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

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

However if you're interested in jQuery plugin, try Chosen.jsor you can create your own in js.

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

回答by Ferie

I would suggest mine solution that you can find in this GitHub repo. This works also for IE8 and IE9with a custom arrow that comes from an icon font.

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

Examples of Custom Cross Browser Drop-downin action: check them with all your browsers to see the cross-browser feature.

自定义跨浏览器下拉操作示例：使用所有浏览器检查它们以查看跨浏览器功能。

Anyway, let's start with the modern browsers and then we will see the solution for the older ones.

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

Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+

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

For these browser, it is easy to set the same background image for the drop-downin order to have the same arrow.

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

To do so, you have to reset the browser's default style for the selecttag and set new background rules (like suggested before).

为此，您必须为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;
    ...
}

The appearancerules are set to none to reset browsers default ones, if you want to have the same aspect for each arrow, you should keep them in place.

该appearance规则设置为none重置浏览器默认的，如果你想为每个箭头相同的外观，你应该让他们在的地方。

The backgroundrules in the examples are set with SVG inline images that represent different arrows. They are positioned 98% from left to keep some margin to the right border (you can easily modify the position as you wish).

background示例中的规则是使用代表不同箭头的 SVG 内嵌图像设置的。它们从左侧放置 98% 以在右侧边界保留一些边距（您可以根据需要轻松修改位置）。

In order to maintain the correct cross-browser behavior, the only other rule that have to be left in place is the outline. This rule resets the default border that appears (in some browsers) when the element is clicked. All the others rules can be easily modified if needed.

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

Drop-down Arrow for Internet Explorer 8 (IE8) and Internet Explorer 9 (IE9) using Icon Font

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

This is the harder part... Or maybe not.

这是更难的部分……或者可能不是。

There is no standard rule to hide the default arrows for these browsers (like the select::-ms-expandfor IE10+). The solution is to hide the part of the drop-downthat contains the default arrowand insert an arrow icon font (or a SVG, if you prefer) similar to the SVG that is used in the other browsers (see the selectCSS rule for more details about the inline SVG used).

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

The very first step is to set a class that can recognize the browser: this is the reason why I have used the conditional IE IFs at the beginning of the code. These IFs are used to attach specific classes to the htmltag to recognize the older IE browser.

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

After that, every selectin the HTML have to be wrapped by a div(or whatever tag that can wraps an element). At this wrapper just add the class that contains the icon font.

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

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

In easy words, this wrapper is used to simulate the selecttag.

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

To act like a drop-down, the wrapper must have a border, because we hide the one that comes from the select.

为了表现得像一个下拉框，包装器必须有一个边框，因为我们隐藏了来自select.

Notice that we cannot use the selectborder because we have to hide the default arrow lengthening it 25% more than the wrapper. Consequently its right border should not be visible because we hide this 25% more by the overflow: hiddenrule applied to the selectitself.

请注意，我们不能使用select边框，因为我们必须隐藏默认箭头，使其比包装器延长 25%。因此，它的右边框不应该是可见的，因为我们通过overflow: hidden应用于select自身的规则隐藏了这 25% 。

The custom arrow icon-font is placed in the pseudo class :beforewhere the rule contentcontains the reference for the arrow (in this case it is a right parenthesis).

自定义箭头图标字体放置在伪类中:before，其中规则content包含箭头的引用（在这种情况下，它是一个右括号）。

We also place this arrow in an absolute position to center it as much as possible (if you use different icon fonts, remember to adjust them opportunely by changing top and left values and the font size).

我们还将这个箭头放置在一个绝对位置，以使其尽可能居中（如果您使用不同的图标字体，请记住通过更改顶部和左侧的值以及字体大小来适时地调整它们）。

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

You can easily create and substitute the background arrow or the icon font arrow, with every one that you want simply changing it in the background-imagerule or making a new icon font file by yourself.

您可以轻松地创建和替换背景箭头或图标字体箭头，只需在background-image规则中更改它或自己制作新的图标字体文件即可。

回答by Tejasvi Hegde

In case you want to use the class and pseudo-class:

如果您想使用类和伪类：

.simple-controlis your css class

.simple-control是你的css类

:disabledis pseudo class

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