Safari 选择箭头覆盖的背景图像答案

【问题标题】：Safari select background image covered by arrowSafari 选择箭头覆盖的背景图像
【发布时间】：2013-06-11 15:20:05
【问题描述】：

当表单元素“脏”（有未保存的更改）时，我在表单元素上放置了一个背景图像。图片使用background-position: right center。

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

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

是否有 CSS 方法可以让背景图像显示在下拉箭头/按钮空间的左侧？我注意到在我的谷歌搜索中，Safari 选择元素与填充不符，所以它已经过时了。

小提琴：http://jsfiddle.net/jinglesthula/uwKpS/

我在 Safari 5.1.7 Win7 中看到了这个问题（我无法访问 OSX 来测试那里是否存在问题）。

【问题讨论】：

为什么投反对票？这是一个合法的问题，我已经花了一些时间来解决我目前发现的问题。
您需要在您的问题中发布代码。希望您可以隔离您的问题并在 jsFiddle 或 jsBin 上创建一个测试用例。
@jinglesthula 投反对票的可能是投反对票stackoverflow.com/questions/9847580/…的同一个“纯粹主义者”

标签： html css forms safari cross-browser

【解决方案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;
}

【讨论】：