iOS Safari 中 <select> 元素上消失的箭头和样式答案

【问题标题】：Dissappearing arrow and styling on <select> element in Safari on iOSiOS Safari 中 <select> 元素上消失的箭头和样式
【发布时间】：2013-03-15 10:34:52
【问题描述】：

我发现当我设置元素样式时（特别是使用background: transparent），iOS 上的 Safari 中缺少箭头。你们中的任何人都经历过这种情况或知道为什么它隐藏了浏览器 chrome 吗？我可以使用条件语句为 iOS 上的 Safari（无 JS）应用 CSS 吗？

设备运行 iOS 6.1.2。

这是 iOS (iPad2) 上 Safari 的截图：

这是 Safari 上的屏幕截图（桌面，Windows 7，所有其他桌面浏览器都一样）：

CSS：

select.choose_state,
select.choose_state option {
    background: transparent;
}
select.choose_state {
    border: 1px solid #000;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    outline: none;

    float: right;
    position: relative;
    top: 35px;
    margin-right: 15px;
    font-size: 1.4em;
}

HTML：

<select name="state_select" id="state_select" class="choose_state" size="1">[...]</select>

【问题讨论】：

标签： ios css ipad safari

【解决方案1】：

一个很晚的答案，但对人们来说是一个小技巧。

下面的代码在桌面上保持选择透明，但在 iOS 上保留默认选择样式。

select {
  background: rgba(0, 0, 0, 0.005);
}

【讨论】：

奇怪且不正确！这肯定是你的屏幕有问题，如果我在我的设备上这样做，我会看到像阴影一样的浅暗背景！它不是 100% 透明的

【解决方案2】：

如果您告诉 webkit 删除所有默认样式，它会删除它，箭头也会删除（在 iOS 中）。您必须创建一个箭头并将其移到选择字段上。

我创建了this pen，使用.dblarrow（CSS 和HTML）包含所有内容，并添加标有/*Important*/ 的样式。

【讨论】：

谢谢！我必须应用一些条件格式，以便额外的箭头仅在 Safari 中可见，但这有效。