如何更改选择框背景，而不失去在移动Safari上的右箭头 [英] How To Change Select Box Background Without Losing the Right Arrow on Mobile Safari

问题描述

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

我试过：

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

这适用于所有浏览器，除了我的iPhone 4s与iOS 7的Safari。在此浏览器上，向右箭头消失，用户不清楚它是一个选择框。

忽略-webkit外观不起作用。 p>

我不想做一个假箭头。

任何想法？

解决方案

你不会找到一个很好的跨浏览器实现通过CSS样式的select元素。更好的解决方案是通过javascript创建自己的下拉菜单，并在所有浏览器中统一对这些元素进行样式化。

I need to change the background on my select box to a flat color but I don't want the right arrow (aka the drop-down arrow) to go away.

I have tried:

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

This works for all browsers except for Safari on my iPhone 4s with iOS 7. On this browser the right-arrow disappears and it is not clear to the user that it is a select box.

Omitting -webkit-appearance doesn't help.

I don't want to make a fake arrow. That will affect all the other browsers.

Any ideas?

解决方案

You are not going to find a good cross-browser implementation for styling the select element via CSS. The better solution is to create your own dropdown via javascript and style those elements uniformly across all browsers.

这篇关于如何更改选择框背景，而不失去在移动Safari上的右箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！