html - Safari 选择箭头覆盖的背景图像

Question

我有一个背景图片，当它们“脏”(有未保存的更改)时，我将它们放在我的表单元素上。该图像使用 background-position: right center。

但是，在 Safari 中，图像显示在黑色三 Angular 形下方，当我将鼠标悬停在它上面时，背景图像(很小)完全被出现的按钮覆盖。

我不确定为什么当其他浏览器从左边缘开始右侧时，Safari 将带有三 Angular 形的右侧按钮内的空间视为右边框内空间的一部分那个按钮。嗯。

有没有一种 CSS 方法可以让背景图像显示在下拉箭头/按钮空间的左侧？我在谷歌搜索中注意到 Safari 的选择元素与填充不一致，所以不存在了。

fiddle :http://jsfiddle.net/jinglesthula/uwKpS/

我在 Safari 5.1.7 Win7 中看到了这个问题(我无法访问 OSX 来测试它是否存在问题)。

Answer 1

我知道这是一个老问题，但我现在遇到了同样的问题，我通过重置 safari 和 css 中的其他网络浏览器的外观来修复它，这是我的解决方案，希望这有帮助。

select { 
    /* and then whatever styles you want*/
    background: url(http://farm3.staticflickr.com/2166/2098205368_3e3f6090ac_t.jpg) no-repeat right #fff;
    /* reset the appearances*/
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    /* and then whatever styles you want*/

    width: 100px;
    padding: 5px;
}