如何更改select框背景，而不会丢失移动Safari上的右箭头

我需要将我的select框的背景更改为平坦的颜色，但我不想让右箭头（aka下拉箭头）消失。

我努力了：

select { -webkit-appearance: none; border: 0; background: none; } 

这适用于所有浏览器，除了iOS 7的iPhone 4s上的Safari。在此浏览器上，右箭头消失，用户不清楚它是否是select框。

省略-webkit外观没有帮助。

我不想做一个假箭头。 这将影响所有其他浏览器。

有任何想法吗？

Answer 1

你不会find一个好的跨浏览器实现通过CSS来select元素的样式。 更好的解决scheme是通过javascript创build自己的下拉菜单，并在所有浏览器中统一设置这些元素。

Answer 2

这就是我所做的。 至less在iOS8中，它可以很好地工作，摆脱那种可怕的渐变，同时允许下拉菜单位于非白色背景上。

我只是使用了background-color: white ，紧随其后的是图像。

我不得不添加一个自定义的箭头，但我只是在我的CSS与一个base64 PNG内联

 .uglyselect & select { -webkit-appearance: none; background-color: white; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==); background-position : right center; background-repeat: no-repeat; padding-right: 1.5em; } 

.uglyselect你可能会问什么？ 这是我的iPad的Modernizrtesting

  Modernizr.addTest('uglyselect', function () { return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false; }); 

您可以根据自己的喜好重新命名它，或者如果您不使用Modernizr，请将其删除。 我更喜欢以这种方式限制到iOS，所以我不必在所有的浏览器上testing它（这就是你最初的要求）。 对于我的devise，桌面浏览器的默认下拉菜单是可以接受的。

（这些填充设置已针对数值进行了优化，可能需要对较长的文本值进行调整）。

Answer 3

稍有不同，但这一直工作对我来说。

只要您使用的是modernizr，请在脚本文件中使用它：

 jQuery(function ($) { if (navigator.userAgent.match('iPad|iPhone|iPod') != -1 ) { $('select').addClass('iOSselect'); // provide a class for iOS select box } }); 

然后，您只需添加其他职位中提到的具体CSS样式。

例如：

 select.iOSselect { -webkit-appearance: none; background-color: white; background-image: url('images/iOS-select-arrow'); background-position : right center; background-repeat: no-repeat; padding-right: 1.5em; } 

希望有所帮助。 就像我说的那样，也可能有其他的方式，但是那个对我来说是有效的。