iPhone 上不出现选择箭头

Question

为我遇到的问题寻找解决方案。

我正在制作一个响应式网站，它有一个选择标签，允许用户选择他们想要显示的博客文章类别，html 只是一个基本的选择标签。

<select name="">
    <option value="">Sort by Category</option>
    <option value="">test</option>
    <option value="">Test</option>
</select>   

然后我使用以下代码设置了选择标签的样式

.portfolio-thumbs select {
    width:100%;
    padding:0.625em;
    border:none;
    background:#33c3e2;
    color:#fff; 
    font-size:1.125em;
 }

select {
    -webkit-appearance: none;
    border-radius: 0;
}

这在 Windows 手机上工作正常，但在 Iphone、黑莓和 Android 上，选择框的箭头不会显示。有没有人以前遇到过这个问题，并且知道我在CSS中做了什么来禁用箭头的显示，或者有一个解决方案来让箭头返回，同时仍然能够按照我想要的方式设置选择的样式。

Answer 1

-webkit-appearance: none;

行告诉webkit浏览器（iPhone、BB和'droid）不要显示默认的

<select>

外观。删除这条线将恢复箭头。

正如评论中提到的，

<select>

对于风格来说真的很痛苦。如果你想真正控制它的外观，唯一现实的选择是使用 @AdamMarshal 提到的替换技术。

或者，如果您绝对必须使用

<select>

和

-webkit-appearance: none;

，请添加箭头背景图像。

Answer 2

您可以添加一个类来选择元素并定义“-webkit-appearance：auto”或“-webkit-appearance：initial” - 这也将覆盖用户代理样式表（webkit外观的默认浏览器值）

Answer 3

就我而言，

appearance

已设置为

auto

。我发现设置任何

background-color

会使箭头出现在 iOS > Web [Chrome、Safari] 上。

所以，我使用

background-color: rgba(255, 255, 255, 0.01)

进行了修复