如何在 IE8 和 IE9 中隐藏下拉箭头？

Posted 2023-03-06

【中文标题】如何在 IE8 和 IE9 中隐藏下拉箭头？

【英文标题】：How to hide drop down arrow in IE8 & IE9?

【发布时间】：2013-10-24 19:10:01

【问题描述】：

我使用下面的 CSS 隐藏了 FF、safari、chrome 中的下拉箭头，并添加了我自己的图像进行自定义。

select 

  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
   appearance:none; 

对于 IE10，我使用了伪元素

select::-ms-expand
  display:none;

我不知道如何对 IE9 和 IE8 应用相同的方法。谁能告诉我如何在 IE8 和 IE9 中隐藏下拉箭头。

【问题讨论】：

在 IE8 中你肯定会遇到很大的困难。由于 IE8 和更早版本呈现选择框的方式，几乎不可能对它们进行任何自定义样式，除非您一直使用 javascript 编写自己的整个选择框小部件。 IE9 可能比较棘手，但应该可以，不像 IE8。

@Spudley 没问题你能回答我如何在 ie9 中做到这一点。

这仍然不容易，但在 IE9 中最坏的情况下，您只需将一个元素粘贴在箭头顶部即可隐藏它。您可以使用::before 选择器来执行此操作。在 IE8 及更早版本中，这是不可能的，因为选择框将始终呈现在其他内容之上。

IE9 的一些想法Select removing dropdown arrow

顺便说一句，您的代码不会删除我的 Firefox/24 for Windows 7 中的任何箭头 fiddle... 看起来像 known issue。

【参考方案1】：

IE9 的另一个糟糕但功能上的解决方案：D

Preview

// 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;

你只需要用这个 IE9 媒体查询 hack 封装这段代码

/* IE9 */
    @media screen and (min-width:0\0) 

    
/* IE9 */

jsFiddle

【参考方案2】：

不确定每个用例，但在我的情况下，为父级设置了固定宽度 x 高度 bg pic，这也适用于 IE 和 FF：

HTML

<div id="parent">
  <select>
    ...
  </select>
</div>

CSS

#parent
  ...
  overflow: hidden;
  width:100px; // for example


#parent select
  ...
  width:120px;

jsfiddle

【参考方案3】：

IE9 的纯 CSS 中的箭头无法删除，这就是他们为 IE10 制作 ::-ms-expand 的原因。

但是，您可以这样做。 jsFiddle here

在此示例中，您在select 上设置了一个固定的width，并用较低的width 和overflow:hidden 包裹div 以屏蔽/隐藏下拉列表。它得到了全力支持。这实际上确实在所有浏览器中隐藏了箭头。

CSS

div 
    width: 80px;
    overflow: hidden;
    border: 1px solid black;

select 
    width: 100px;
    border: 0px;

【讨论】：

您的答案在小提琴中运行良好，但在我的应用程序中实现它时，我无法为“select”设置宽度。负值填充也不适用于 IE9。任何想法来解决这个问题.

我有一个疑问，我可以增加“选择”的宽度，就像在我的应用程序中一样，我尝试了同样的方法，但它不起作用。

@Royal 这很奇怪。你能提供一个例子或什么吗？我去看看。

【参考方案4】：

您已要求 IE8 和 IE9 的解决方案。

让我们从 IE8 开始。 简短回答：不可能。由于 IE8 和更早版本呈现选择框的方式，您根本无法隐藏下拉箭头。选择框控件无法在旧 IE 中设置样式，并且始终显示在任何其他内容之上。

除了用 Javascript 重写整个选择框控件之外，根本没有任何解决方案。

现在是 IE9。您可以隐藏下拉箭头。这不是标准的东西，但你可以破解它。

您需要从选择框周围的包装元素（例如<div>）开始。然后，您可以使用 :before 选择器对其进行样式设置，以便在下拉箭头的顶部放置额外的内容，从而有效地隐藏它。

这是 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;

...和see here 让 jsFiddle 看到它的实际效果。

注意，我使用red 作为覆盖颜色，以使正在发生的事情一目了然。很明显，在正常使用中，您会希望使用白色，这样它就不会太显眼。

您还会注意到，如上所述，这在 IE8 中不起作用。

显然，这与 IE10 和其他浏览器的“正确”解决方案不同，后者实际上删除了箭头；我们在这里所做的只是隐藏它。这意味着我们最终会在箭头所在的选择框的末端出现一个恼人的白色补丁。

我们可以做进一步的样式来解决这个问题：例如，如果我们将容器元素设置为固定宽度并使用overflow:hidden，我们可以摆脱白色补丁，但是我们会遇到选择框边框的问题坏了，所以我们必须做进一步的样式修复；这一切都会变得有点混乱。当然，这个选项只有在选择框本身是已知的固定宽度时才有效。

所以你有它：在 IE9 中有执行此操作的选项。虽然它们并不漂亮，坦率地说可能不值得付出努力。但如果你绝望了，你可以做到。

哦，别忘了把这个 CSS 代码具体化，让它只在 IE9 上运行，否则会在其他浏览器上出现问题。

【讨论】：

这是视觉修复问题的绝佳解决方案。然而，一个明显的副作用是用户无法单击封面元素来激活和打开选择下拉菜单。如果使用这种方法，请考虑到这一点。

是的，这是一个有趣的修复，绝对让它看起来不错，仍然让我有点愤怒，因为 IE9 是垃圾箱之火

这在提供 CSS 解决方案的现代浏览器上还不够完美。对于 2017 年，我会说几乎所有网站都不支持 IE8 是可以的，只要网站正常运行，就可以禁用 IE9 的视觉修饰。

@AdamLeggett - 是的，你完全正确。我今天当然不支持 IE8 或 IE9。答案是在 2013 年给出的，当时情况有些不同。

@Spudley，我发现支持外观退化但功能完整的 IE9 通常并不难。否则，同意。

【参考方案5】：

在旧版本的 IE 中完成此操作的唯一方法是将 <select> 包装在一个稍小的容器中并设置 overflow: hidden; 这将隐藏右侧的箭头但仍允许您打开下拉菜单通过点击它。这很混乱，但这是完成你想要的事情的唯一方法。

在过去，这些元素无法设置样式，因为它们被认为是操作系统的一部分。既然您提到的伪元素可用，这似乎不再是一个问题。