如何设置自动填充下拉列表的样式 [英] How to style autocomplete dropdown list

问题描述

我正在寻找纯粹的HTML / CSS解决方案。到目前为止，我发现的所有东西都涉及到插件（通常是jquery）。

我希望能够设置自动填充建议下拉框（我不知道它是什么真的叫，所以我试图描述它）。

例如我有

CSS

  input [type = search] {
 background：none; 
 font-weight：bold; 
 border-color：＃2e2e2e; 
 border-style：solid; 
 border-width：2px 2px 2px 2px; 
概述：无; 
 padding：10px 20px 10px 20px; 
 width：250px; 
 
 $ / code> 

自动完成下拉框是传统的简单白盒，字体。我不知道我的CSS中的目标是什么来更新它。

HTML

 < div id =search> 
< form method =GETaction =events> 
< div id =search_field_container> 
< input name =cityid =search_inputtype =searchplaceholder =City，ST> 
< / div> 
< input type =submitvalue =Find> 
< / form> 
< / div> 
  

解决方案

显然，自动填充下拉框无法用CSS编辑，不是DOM的一部分。我发现这些信息来自以下（重复）问题。

如何设置浏览器的自动完成下拉框的样式？

在浏览器中设置自动完成下拉菜单

I am looking for a pure HTML / CSS solution. Everything I have found so far involves plugins (jquery usually).

I want to be able to style the "autocomplete suggestions dropdown box" (I don't know what it is really called so I tried to describe it).

For example I have

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;
}

The "autocomplete dropdown box" is the traditional simple white box with it's own default font. I don't know what to target in my CSS to update this.

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>

解决方案

Apparently the autocomplete dropdown box cannot be edited with CSS and is not part of the DOM. I found this information from the following (duplicate) questions.

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

这篇关于如何设置自动填充下拉列表的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！