如何移除iOS Safari中input搭配datalist时的蓝色箭头

当页面使用<input>结合<datalist>实现下拉提示时，iOS Safari会在输入框右侧显示一个蓝色箭头，常规的Chrome端移除方案对iOS无效。以下是针对iOS Safari的解决方法：

核心解决思路 #

iOS Safari为带list属性的<input>元素提供了私有伪元素::-webkit-list-button来控制这个蓝色箭头，通过隐藏该伪元素即可移除箭头。

完整代码示例 #

<input type="text" list="datalist">
<datalist id="datalist">
    <option>Carrots</option>
    <option>Peas</option>
    <option>Beans</option>
</datalist>

<style>
/* 隐藏iOS Safari的datalist箭头 */
input[list]::-webkit-list-button {
    display: none;
}

/* 可选：调整输入框右侧内边距，避免箭头隐藏后输入内容贴边 */
input[list] {
    padding-right: 1em;
}
</style>

补充说明 #

• 该样式仅针对iOS Safari生效，不会破坏其他浏览器中<datalist>的正常功能
• 隐藏箭头后，用户依然可以通过点击输入框触发下拉选项，不影响交互逻辑

内容的提问来源于stack exchange，提问作者Mushr00m