如何在 IE8 & 中隐藏下拉箭头IE9? [英] How to hide drop down arrow in IE8 & IE9?

问题描述

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

选择{-webkit 外观:无；-moz-外观:无；-o-外观:无；外观:无；}

对于 IE10，我使用了伪元素

select::-ms-expand{显示:无；}

我不知道如何为 IE9 & 应用相同的内容IE8.谁能告诉我如何在 IE8 & 中隐藏下拉箭头?IE9.

解决方案

您已经要求针对 IE8 和 IE9 的解决方案.

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

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

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

您需要从选择框周围的包装元素(例如

)开始.然后，您可以使用 :before 选择器设置样式，在下拉箭头的顶部放置额外的内容，有效地隐藏它.

这是CSS:

div {位置:相对；显示:内联块；z-索引:0}div 选择 {z-索引:1；}div:之前{显示:块；位置:绝对；内容:'';右:0px;顶部:0像素；高度:1em；宽度:1em；边距:2px；背景:红色；z-索引:5；}

...和参见此处，了解 jsFiddle 的运行情况.

注意，我使用了 red 作为覆盖颜色，以便清楚地表明正在发生的事情.很明显，在正常使用中你会想要使用白色，这样它就不会很突出.

您还会注意到，正如我上面所说，这在 IE8 中不起作用.

显然，这与 IE10 和其他浏览器的正确"解决方案不同，后者实际上删除了箭头；我们在这里所做的就是隐藏它.这意味着我们最终会在选择框的末尾出现一个恼人的白斑，箭头所在的位置.

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

所以你有它:在 IE9 中有执行此操作的选项.但它们并不漂亮，坦率地说可能不值得付出努力.但如果你不顾一切，你可以做到.

哦，别忘了让这个 CSS 代码特定于它，所以它只能在 IE9 上运行，否则会导致其他浏览器出现问题.

I used the CSS below to hide the drop down arrow in FF, safari, chrome and added my own image to customize.

select 
{
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
   appearance:none; 
}

For IE10, I used the pseudo-element

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.

解决方案

You've asked for a solution for IE8 and 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.

There simply isn't any solution to this, other than rewriting the entire select box control in Javascript.

Now IE9. You can hide the drop-arrow. It's not a standard thing, but you can hack it.

You need to start with a wrapper element (eg a <div>) around your select box. You can then style this with a :before selector to place an extra bit of content over the top of the drop-arrow, effectively hiding it.

Here's the 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 here for the jsFiddle to see it in action.

Note, I've used red as 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.

You'll also note that as I stated above, this does not work in 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.

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.

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.

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.

这篇关于如何在 IE8 & 中隐藏下拉箭头IE9?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！