如何更改选择框背景而不在移动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 创建您自己的下拉列表，并在所有浏览器中统一设置这些元素的样式。