Html 如何隐藏 IE8 和 IE9 中的下拉箭头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19407332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide drop down arrow in IE8 & IE9?
提问by Royal
I used the CSS below to hide the drop down arrow in FF, safari, chrome and added my own image to customize.
我使用下面的 CSS 来隐藏 FF、safari、chrome 中的下拉箭头，并添加了我自己的图像进行自定义。
select
{
-webkit-appearance:none;
-moz-appearance:none;
-o-appearance:none;
appearance:none;
}
For IE10, I used the pseudo-element
对于 IE10，我使用了伪元素
select::-ms-expand{
display:none;
}
I don't know how to apply the same for IE9 & IE8. Can anyone tell me how to hide the drop down arrow in IE8 & IE9.
我不知道如何对 IE9 和 IE8 应用相同的方法。谁能告诉我如何在 IE8 和 IE9 中隐藏下拉箭头。
回答by Spudley
You've asked for a solution for IE8 and IE9.
您已经要求 IE8 和 IE9 的解决方案。
Let's start with IE8.Short answer: It's not possible. Because of the way IE8 and earlier render select boxes, you simply cannot hide the drop-down arrow. Select box controls are impossible to style in old IE, and always appear positioned above any other content.
让我们从 IE8 开始。简短的回答：这是不可能的。由于 IE8 和更早版本呈现选择框的方式，您根本无法隐藏下拉箭头。选择框控件在旧版 IE 中无法设置样式，并且总是出现在任何其他内容之上。
There simply isn't any solution to this, other than rewriting the entire select box control in Javascript.
除了在 Javascript 中重写整个选择框控件之外，根本没有任何解决方案。
Now IE9.You canhide the drop-arrow. It's not a standard thing, but you can hack it.
现在IE9。您可以隐藏下拉箭头。这不是标准的东西，但你可以破解它。
You need to start with a wrapper element (eg a <div>) around your select box. You can then style this with a :beforeselector to place an extra bit of content over the top of the drop-arrow, effectively hiding it.
您需要从<div>选择框周围的包装元素（例如 a ）开始。然后，您可以使用:before选择器对其进行样式设置，在下拉箭头的顶部放置一些额外的内容，从而有效地隐藏它。
Here's the CSS:
这是CSS：
div {
position:relative;
display:inline-block;
z-index:0
}
div select {
z-index:1;
}
div:before {
display:block;
position:absolute;
content:'';
right:0px;
top:0px;
height:1em;
width:1em;
margin:2px;
background:red;
z-index:5;
}
...and see herefor the jsFiddle to see it in action.
...并在此处查看 jsFiddle 以查看它的实际效果。
Note, I've used redas the overlay colour to make it obvious what's happening. Clearly in normal use you'd want to use white so it doesn't stand out.
请注意，我已将其用作red叠加颜色以清楚显示正在发生的事情。很明显，在正常使用中你会想要使用白色，这样它就不会很突出。
You'll also note that as I stated above, this does not work in IE8.
您还会注意到，正如我上面所说的，这在 IE8 中不起作用。
Obviously, this isn't the same as the "proper" solution for IE10 and other browsers, which actually remove the arrow; all we're doing here is hiding it. And this means that we end up with an annoying white patch at the end of the select box where the arrow used to be.
显然，这与 IE10 和其他浏览器的“正确”解决方案不同，后者实际上删除了箭头；我们在这里所做的就是隐藏它。这意味着我们最终会在箭头曾经所在的选择框的末尾出现一个令人讨厌的白色补丁。
We can do further styling to solve this: eg if we make the container element a fixed width and with overflow:hidden, we can get rid of the white patch, but then we have issues with the borders of our select box being broken, so we have to do further styling fixes; it can all get a bit messy. Plus of course, this option only works if the select box itself is a known fixed width.
我们可以做进一步的样式来解决这个问题：例如，如果我们将容器元素设置为固定宽度并使用overflow:hidden，我们可以摆脱白色补丁，但是我们的选择框的边框被破坏了，所以我们必须做进一步的样式修复；它可能会变得有点混乱。另外当然，这个选项只有在选择框本身是一个已知的固定宽度时才有效。
So there you have it: There are options for doing this in IE9. They're not pretty though, and frankly may not be worth the effort. But if you're desperate, you can do it.
所以你有它：在 IE9 中有执行此操作的选项。不过它们并不漂亮，坦率地说可能不值得付出努力。但如果你绝望，你可以做到。
Oh, and don't forget to make this CSS code specific so it only runs on IE9, otherwise it will cause issues on other browsers.
哦，别忘了使此 CSS 代码特定，以便它只能在 IE9 上运行，否则会导致其他浏览器出现问题。
回答by Josh Crozier
You cannot remove the arrow in pure CSS for IE9 <That's why they made ::-ms-expandfor IE10.
你不能在IE9 的纯 CSS 中删除箭头<这就是他们::-ms-expand为 IE10制作的原因。
You could, however, do something like this. jsFiddle here
然而，你可以做这样的事情。jsFiddle在这里
In this example, you set a fixed widthon select, and wrap a divwith a lower widthand overflow:hiddenin order to mask/hide the dropdown. It has full support. This essentially doeshide the arrow in all browsers.
在这个例子中，你设置了一个fixed widthon select，并div用一个更低的widthand包裹aoverflow:hidden以掩盖/隐藏下拉列表。它有充分的支持。这实际上确实隐藏了所有浏览器中的箭头。
CSS
CSS
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}
回答by nullability
The only way to accomplish this in older versions of IE is to wrap the <select>in a slightly smaller container and set overflow: hidden;This would hide the arrow on the right side but still allow you to open the drop-down by clicking on it. It's messy but it's the only way to accomplish what you want.
在旧版本的 IE 中完成此操作的唯一方法是将其包装<select>在一个稍小的容器中并设置。overflow: hidden;这将隐藏右侧的箭头，但仍允许您通过单击来打开下拉菜单。这很混乱，但这是完成您想要的唯一方法。
In the past these elements have not been styleable because they were considered part of the operating system. It appears that this is becoming less of an issue now that the pseudo-elements like you mentioned are available.
过去，这些元素没有样式化，因为它们被认为是操作系统的一部分。既然您提到的伪元素可用，这似乎变得不那么重要了。
回答by tmatyo
not sure about every use case, but in my case with a fixed width x height bg pic set up for the parent, this worked for IE and FF too:
不确定每个用例，但在我的情况下，为父级设置了固定的宽度 x 高度 bg pic，这也适用于 IE 和 FF：
HTML
HTML
<div id="parent">
<select>
...
</select>
</div>
CSS
CSS
#parent{
...
overflow: hidden;
width:100px; // for example
}
#parent select{
...
width:120px;
}
回答by Alberto
Another bad but functionally solucion for IE9 :D
IE9 的另一个糟糕但功能强大的解决方案：D
// CSS
// CSS
div {
position:relative;
display:inline-block;
border:solid black 1px;
z-index:0
}
div select {
z-index:1;
border:none;
width:200px;
}
div:before {
display:block;
position:absolute;
content:url('http://help.eclipse.org/mars/topic/org.eclipse.stardust.docs.enduser/html/handbooks/execution-clients/rules/images/arrow.png');
right:-2px;
top:-1px;
padding-left:2px;
height:18px;
width:15px;
margin:2px;
background:white;
z-index:445;
border: 0;
}
All you need is encapsulate this code with this IE9 media query hack
你所需要的只是用这个 IE9 媒体查询 hack 封装这个代码
/* IE9 */
@media screen and (min-width:0##代码##) {
}
/* IE9 */
