如何移除关联datalist的input框hover时的向下箭头（Caret down）图标？

当然可以移除这个默认的向下箭头图标——这是浏览器为关联了datalist的input元素添加的原生样式，通过CSS就能轻松覆盖隐藏。

解决方法 #

添加以下CSS样式，针对不同浏览器内核做兼容处理：

/* 隐藏 WebKit 内核浏览器（Chrome、Edge、Safari）的默认箭头 */
input[list]::-webkit-calendar-picker-indicator {
    display: none;
}

/* 处理 Firefox 浏览器的默认样式 */
input[list] {
    -moz-appearance: textfield;
}
input[list]::-moz-list-bullet {
    display: none;
}

/* 通用兜底样式，确保所有浏览器都隐藏箭头 */
input[list] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

修改后的完整代码示例 #

<html>
<head>
    <style>
        input[list]::-webkit-calendar-picker-indicator {
            display: none;
        }
        input[list] {
            -moz-appearance: textfield;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: none;
        }
        input[list]::-moz-list-bullet {
            display: none;
        }
    </style>
</head>
<body>
    <h1>The datalist element</h1>
    <form action="/action_page.php" method="get">
        <label for="browser">Choose your browser from the list:</label>
        <input list="browsers" name="browser" id="browser">
        <datalist id="browsers">
            <option value="Edge">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera"> 
            <option value="Safari">
        </datalist>
        <input type="submit">
    </form>
    <p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
</body>
</html>

注意事项 #

• 隐藏箭头后，datalist的核心功能不受影响：用户输入时依然能触发下拉选项列表，只是input框上不会再显示默认的向下箭头。
• 不同浏览器的默认样式前缀不同，所以需要多写几条规则做兼容覆盖。

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