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

Pat*_*ore 2 css safari ipad ios

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

该设备运行的是iOS 6.1.2.

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

Safari iOS

这是Safari(桌面,Windows 7,所有其他桌面浏览器都相同)的屏幕截图:

Safari桌面

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;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

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

aNe*_*847 6

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

我制作了这支笔,包括所有内容.dblarrow(CSS和HTML)并添加标有的样式/*Important*/.