移动 Safari:更改选择器视图的背景颜色(选择)

问题描述:

Mobile Safari 为 元素使用 UIPickerView - 我想用 CSS 更改它的背景颜色.正如您在下面的屏幕截图中看到的那样,它很难阅读.您正在查看的是 State 表单元素.更改 元素本身的文本颜色或背景颜色并不能解决问题.

Mobile Safari uses a UIPickerView for <select> elements - I'd like to change the background color of it with CSS. As you can see in the screen shot below, it's very hard to read. What you are looking at is the State <select> form element. Changing the text color or background color of the <select> element itself doesn't fix the problem.

我认为它与父元素的或其自身的背景颜色有关 - 但我继续前进并将每个祖先元素的背景颜色更改为白色,但问题仍然存在.是否有前缀样式或技巧可以使此 GUI 清晰易读?或者这只是一个错误.

I thought it was related to a parent element's or its own background color - but I went up the line and changed every ancestor element's background color to white and the problem persisted. Is there a prefixed style or trick to making this GUI legible? Or maybe it's just a bug.

UIPickerView 后面的灰色由移动版 Safari 填充,因为选择几乎在页面底部.Mobile Safari 将选择垂直居中在 UIPickerView 上方,并用灰色填充页面下方的额外空间.问题是,它是如何决定使用那个深灰色的?我曾尝试更改页面上所有其他元素的正文文本颜色和背景颜色,但均无济于事.

The gray behind the UIPickerView is filled in by mobile Safari, since the select is almost at the bottom of the page. Mobile Safari vertically centers the select above the UIPickerView and fills in the extra space below the page with the gray. The question is, how does it determine to use that dark gray? I've tried changing the body text color, and background-color of every other element on the page to no avail.

不幸的是,没有办法做到这一点.iOS Safari 完全控制 select 列表的内部内容样式.这是验证的参考:小链接.

Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.

实现此目的的一种方法是使用 JavaScript 模拟下拉/选择菜单.

One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.

这不是很可取,但是如果您绝对需要更改默认样式,那么恐怕这是唯一的方法;这是一个演示,应该可以让您了解如何进行模拟:另一个小链接.

It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.