html - 如何设置自动完成下拉列表的样式

Question

我正在寻找纯 HTML/CSS 解决方案。到目前为止我发现的所有内容都涉及插件(通常是 jquery)。

我希望能够设置“自动完成建议下拉框”的样式(我不知道它的真正名称所以我试着描述它)。

比如我有

CSS

input[type=search] {
        background: none;
        font-weight: bold;
        border-color: #2e2e2e;
        border-style: solid;
        border-width: 2px 2px 2px 2px;
        outline: none;
        padding:10px 20px 10px 20px;
        width: 250px;
}

“自动完成下拉框”是传统的简单白色框，带有自己的默认字体。我不知道要在我的 CSS 中定位什么来更新它。

HTML

<div id="search">
        <form method="GET" action="events">
                <div id="search_field_container">
                        <input name="city" id="search_input" type="search" placeholder="City, ST">
                </div>
                <input type="submit" value="Find">
        </form>
</div>

Answer 1

显然，自动完成下拉框不能用 CSS 编辑，也不是 DOM 的一部分。我从以下(重复)问题中找到了此信息。

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers