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

I am finding when I style elements (specifically, with background: transparent), the arrow is missing in Safari on iOS. Have any of you experienced this or know why it's hiding the browser chrome? Can I use conditional statements to apply CSS just for Safari on iOS (without JS)?

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

The device is running iOS 6.1.2.

该设备运行的是iOS 6.1.2。

here is a screenshot on Safari in iOS (iPad2):

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

Here is a screenshot on Safari (desktop, Windows 7, same for all other desktop browsers):

这是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>

[...]

2 个解决方案

#1

If you tell webkit to remove all default styling, it will remove it, also the arrow (in iOS). You will have to create a arrow and shift it over the select field.

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

I made this pen, include everything with .dblarrow (CSS and HTML) and add styles marked with /*Important*/.

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

#2

A very late answer but a little trick for people.

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

The code below keep the select transparent on desktop but let the default select style on iOS.

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

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