如何隐藏IE8& IE9？ [英] How to hide drop down arrow in IE8 & IE9?

问题描述

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

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

对于IE10，我使用伪元素

For IE10, I used the pseudo-element

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

我不知道如何应用相同的IE9& IE8。任何人都可以告诉我如何隐藏下拉箭头在IE8& IE9。

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.

推荐答案

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

You've asked for a solution for IE8 and IE9.

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

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.

现在使用IE9。您可以隐藏拖放箭头。

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

您需要从一个包装元素开始（例如< div> ）。然后，您可以使用：before 选择器对此进行设置，将一个额外的内容放置在下拉箭头顶部，从而有效隐藏它。

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.

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

...和请参阅此处以了解jsFiddle在操作中的效果。

...and see here for the jsFiddle to see it in action.

注意，我使用了 code>作为重叠颜色，使它明显发生了什么。显然，在正常使用中，你会想使用白色，所以它不突出。

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.

您还将注意到，如上所述，这不工作IE8。

You'll also note that as I stated above, this does not work in IE8.

很显然，这和IE10和其他浏览器的正确解决方案不一样，它实际上删除了箭头;我们在这里做的就是隐藏它。这意味着我们最终在选择框的末尾有一个恼人的白色补丁，箭头以前是。

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.

我们可以做进一步的样式来解决这个问题：例如，如果我们使容器元素的宽度固定，并且 overflow：hidden ，我们可以摆脱白色补丁，但是我们有选择框的边框问题被破坏，所以我们要做进一步的造型修复;它可以都有点凌乱。加上当然，这个选项只有在选择框本身是一个已知的固定宽度时才有效。

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.

所以你有它：在IE9中有这样做的选项。他们不漂亮，坦率地说，可能不值得的努力。但是如果你绝望，你可以做到。

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.

哦，不要忘记使这个CSS代码具体，所以它只运行在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.

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