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

Question

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

设备正在运行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>

Answer 1

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

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

Answer 2

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

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

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