选择在 iphone 7 plus 中看起来不同的输入字段

Question

我正在处理website 的移动视图，其中选择输入字段在 iphone 7 plus 中与其他手机相比看起来不同。我已经创建了示例小提琴https://jsfiddle.net/mng5yk8L/5/embedded/result

用于创建选择输入字段框的 HTML 代码是：

<p>
    <input type="text" name="filter_29" id="search-box-filter_29" value="">
</p>

第一张截图：
我在 Chrome 浏览器的 Windows 笔记本电脑的移动视图 中看到的选择输入字段框 的屏幕截图是：

第二张截图：
我从 Iphone 7 plus 手机上看到的内容（我不想要）的屏幕截图是：

问题陈述：
我想知道我需要在 css 中进行哪些更改，以便当我在 iphone 7 plus 的移动视图中打开网站时，它应该看起来与第一个屏幕截图完全相同。

Answer 1

select{-webkit-appearance: none;}

将它添加到您的 css 中的任何类都应该可以清除任何奇怪的 safari 问题。我通常将它包含在我的 CSS 的正文选择器中