选择箭头不会出现在 iPhone 上答案

【问题标题】：Select arrow do not appear on iphone选择箭头不会出现在 iPhone 上
【发布时间】：2022-01-28 13:28:19
【问题描述】：

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

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

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

然后我使用以下代码设置了 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 中做了什么来禁用箭头显示或有一个解决方案来让箭头返回，同时仍然能够设置我想要的样式。

【问题讨论】：

选择框会带来很多麻烦。在过去，我尝试过使用 JQuery Mobile 选择框（丑陋、圆润和破坏 DOM）和 Bootstrap 选择框。仍然不是 100% 相信最好的方法。这可能会有所帮助：stackoverflow.com/a/11186039/1061602
尝试删除-webkit-appearance
移除 webkit 外观？这可能是导致问题的原因。
我知道 -webkit-appearance 外观最有可能是导致问题的原因，但删除它意味着我不再对选择框样式有任何实际控制权，如果不可能的话，我想尝试并保留它虽然那是我必须下去的根源
你可以试试dropkick，它是一个非常容易使用的下拉定制器。我不会在这些东西上浪费时间。

标签： html css responsive-design

【解决方案1】：

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

正如 cmets 中所提到的，<select> 对风格来说真的很痛苦。如果您想真正控制它的外观，那么唯一现实的选择是使用@AdamMarshal 提到的替换技术。

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

【讨论】：

不是绝对必须的，背景图片的问题是在 Firefox 和 Ie 等浏览器上，背景图片会显示在箭头下方，所以我决定走 jQuery 替换路线
哇，我希望将来有一个 css 解决方案能很快出现

【解决方案2】：

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

【讨论】：