删除IE上的选择箭头

Question

我有选择元素,我想删除箭头,然后我可以添加其他图标..我可以为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;
 }

查阅小提琴上的IE9.所有我需要的是移除ie9中的箭头请JSFIDDLE回答.

Answer 1

在IE9中,@ Spudley建议纯粹是黑客攻击.由于您已自定义div的高度和宽度并选择,因此您需要更改div:beforecss以匹配您的.

如果它是IE10,那么使用下面的css3是可能的

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

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

Answer 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Answer 3

如果您想使用类和伪类：

.simple-control是你的css类

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