如何在不同浏览器中自定义选择输入中的箭头样式？

自定义选择输入中的箭头样式

当前的任务是将选择输入中的默认箭头图像替换为自定义图片。然而，实现此自定义的努力仅在 Chrome 中取得了成功。

提供的 HTML 和 CSS 代码涉及创建一个与选择输入具有相同尺寸的 div 元素并将其背景设置为透明。所需箭头的图像作为背景包含在 div 的右上角。

不幸的是，Firefox 和 IE9 显示原始箭头而不是自定义图像。要解决此问题，请考虑利用以下 CSS 修改：

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

此代码在应用于 select 元素时，会删除浏览器的默认样式，包括箭头。然而，值得注意的是，Firefox 在版本 35 之前并不完全支持此功能。

另一种方法涉及使用 JavaScript。此 jsfiddle 中演示了一种解决方法：https://jsfiddle.net/b5gu6306/

总之，要自定义选择输入中的箭头样式，请使用建议的 CSS 代码修改选择元素的外观。对于 35 之前的 Firefox 版本，请考虑实施提供的 JavaScript 解决方法。

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