选择箭头不会出现在 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、Blackberry 和 Android 上，选择框的箭头不显示。有没有人以前遇到过这个问题并且知道我在我的 CSS 中做什么来禁用箭头显示或有一个解决方案来让箭头回来，同时仍然能够按照我想要的方式选择样式。

Answer 1

该-webkit-appearance: none;行告诉 webkit 浏览器（iPhone、BB 和 'droid）不要显示默认<select>外观。删除此行将恢复箭头。

正如评论中提到的，<select>风格真的很痛苦。如果您想真正控制使用@AdamMarshal 提到的替换技术的外观，这是唯一现实的选择。

或者，如果您绝对必须使用<select>and -webkit-appearance: none;，请添加箭头的背景图像。