在< select>上消失箭头和样式iOS上的Safari中的元素 [英] Dissappearing arrow and styling on <select> element in Safari on iOS

问题描述

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

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 6.1.2。

The device is running iOS 6.1.2.

这是iOS（iPad2）上Safari的截图：

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

以下是Safari（桌面，Windows 7，所有其他桌面浏览器都相同）的屏幕截图：

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

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_selectid =state_selectclass =choose_statesize =1> [...]< / select>

推荐答案

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

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.

我做了这支笔，包含所有 .dblarrow （CSS和HTML）并添加标有 / *的样式重要* / 。

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

这篇关于在< select>上消失箭头和样式iOS上的Safari中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！