CSS <select> 下拉菜单在 iOS/iPAD 浏览器中不显示背景颜色答案

【问题标题】：CSS <select> dropdown not displaying background color in iOS/iPAD browsersCSS <select> 下拉菜单在 iOS/iPAD 浏览器中不显示背景颜色
【发布时间】：2017-05-28 20:09:49
【问题描述】：

我有一个下拉框并用 CSS 设置样式；背景颜色为红色，边框为黄色。这在所有 PC 浏览器中都可以正常显示，但在 iOS/iPAD 浏览器中，背景仍然是灰色（我猜是标准颜色）。

这是我的 CSS：

select#json-one{
    width:15%;
    margin:10px 10px;
    padding:6px 6px;
    border:#FF0 1px solid;
    background-color:#7f3133;
    color:#FFF;
    font-size:16px;
    font-family:Georgia, "Times New Roman", Times, serif;
}

这是我的 HTML：

<form action="" method="get" id="form1">
    <select id="json-one">
        <option selected value="norway">Norway</option>
        <option value="usa">USA</option>
        <option value="denmark">Denmark</option>
    </select>
</form>

有没有办法在 CSS 代码中解决这个问题，还是我需要使用 JavaScript / JQuery？我无法成功找到如何使用 JavaScript 设置下拉菜单样式，因此非常感谢您提供帮助。

为了说明我的问题，请在此处查看屏幕截图： http://jazzkatt.net/testtwo/

谢谢。

【问题讨论】：

标签： html ios css dropdown

【解决方案1】：

类似https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/的东西希望这会有所帮助。我刚刚在我的mac上测试了它对我来说工作正常。如果您需要更多帮助，请告诉我

【讨论】：

【解决方案2】：

您无法更改 iOS 浏览器中选择框项目的外观。 iOS Safari 不适用于您赋予它的样式。您必须使用纯 JavaScript 制作下拉菜单，以赋予它们不同的风格

【讨论】：

感谢您提供的信息。你会碰巧有一个在纯 javascript 中创建下拉菜单的教程的链接吗？
我同意萨斯特里的观点。在 WKWebView 或 Safari 中更改选择框的外观确实几乎是不可能的。点击选择框后看到的弹出视图是私有类型 WKSelectTableViewController 的本机控制器。它提供了一个表格视图，但单元格还包含私有 UITableViewCellContentViews...您无法更改其属性。既不是在css中也不是在本机中。所以，实现你自己的基于 js 的选择框是唯一的选择。

【解决方案3】：

您可以简单地为背景设置一个伪元素的样式。只需确保您的 ::before 与选择的样式匹配，因此包括任何边框半径等。

select#json-one {
  position: relative;
  width: 15%;
  margin: 10px 10px;
  padding: 6px 6px;
  border: #ff0 1px solid;
  background-color: #7f3133;
  color: #fff;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

select#json-one::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  background-color: #7f3133;
}

【讨论】：