如何更改选择框背景而不在移动Safari上丢失右箭头

Question

我需要将选择框上的背景更改为平面颜色，但我不希望右箭头（也就是下拉箭头）消失。

我试过了：

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

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

省略-webkit-appearance无济于事。

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

有什么想法吗？

Answer 1

这就是我的工作。至少在iOS8中，它工作得很好并且摆脱了那个可怕的渐变，同时允许下拉菜单位于非白色背景上。

我刚刚使用了background-color: white，紧接着是图片。

我确实需要添加一个自定义箭头，但我只是使用base64 PNG在我的CSS中内联它

.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的Modernizr测试

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

您可以根据需要重命名 - 或者如果您不使用Modernizr，则将其删除。我更喜欢以这种方式将其限制在iOS，所以我没有必要在所有浏览器上测试它（而且这是你最初要求的）。我的设计可以接受桌面浏览器的默认下拉列表。

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

Answer 2

您不会找到一个良好的跨浏览器实现来通过CSS设置select元素的样式。更好的解决方案是通过javascript创建自己的下拉列表，并在所有浏览器中统一设置这些元素。

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;
}

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