如何在不同浏览器中自定义选择下拉箭头？

自定义选择箭头样式

您在修改选择元素箭头的外观并使其在浏览器中保持一致时遇到困难。具体来说，您在 Firefox 和 Internet Explorer 9 中遇到问题，箭头未按预期替换。

要解决此问题，了解底层浏览器差异至关重要。 Chrome、Firefox 和 IE9 以不同的方式处理选择元素箭头的自定义样式。

Chrome 和 Safari：
这些浏览器对选择箭头的外观样式提供高级支持。使用 CSS，您可以定义自定义背景图像并消除默认箭头。

Firefox：
在版本 35 之前，Firefox 本身不支持更改选择箭头的外观使用CSS。因此，默认箭头仍然可见。

Internet Explorer 9：
众所周知，IE9 在选择元素的样式方面存在某些限制，包括无法隐藏默认箭头。

解决方案：**

为了达到您想要的结果，您可以合并特定于浏览器的 CSS属性：

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

通过应用这些属性，您可以指示 Firefox 忽略其默认外观并使用 CSS 中定义的自定义样式。此外，对于 IE9，您可以通过使用背景属性来利用您自己的图像覆盖默认箭头。

注意：
如提供的答案中所述，Firefox直到版本 35 本身并不支持自定义选择箭头外观。为了实现旧版兼容性，请考虑检查浏览器版本并实施替代解决方案，例如上述 jsfiddle 中建议的解决方案。

以上是如何在不同浏览器中自定义选择下拉箭头？的详细内容。更多信息请关注PHP中文网其他相关文章！