Html 如何设置自动完成下拉列表的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28308574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style autocomplete dropdown list
提问by drewsmug
I am looking for a pure HTML / CSS solution. Everything I have found so far involves plugins (jquery usually).
我正在寻找纯 HTML/CSS 解决方案。到目前为止，我发现的所有内容都涉及插件（通常是 jquery）。
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
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.
“自动完成下拉框”是传统的简单白框，带有自己的默认字体。我不知道在我的 CSS 中定位什么来更新它。
HTML
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>
采纳答案by drewsmug
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.
显然，自动完成下拉框不能用 CSS 编辑，也不是 DOM 的一部分。我从以下（重复的）问题中找到了这些信息。
How to style the browser's autocomplete dropdown box?
回答by Cameron Hunter
.ui-widget-content .ui-state-focus
{
background: blue;
border: 1px solid red;
}
Make sure you have downloaded the jQuery-ui package and provided links for the css and js in your html. http://jqueryui.com/download/
确保你已经下载了 jQuery-ui 包并在你的 html 中提供了 css 和 js 的链接。http://jqueryui.com/download/
The css file you're overriding is jquery-ui.css
您要覆盖的 css 文件是 jquery-ui.css
回答by atastrumf
Problem here are browsers, because they apply their own styles. To get around this restriction you need to override/disable browser engine styles.
这里的问题是浏览器，因为它们应用自己的样式。要绕过此限制，您需要覆盖/禁用浏览器引擎样式。
For webkit(tested in Safari) use:
对于 webkit（在 Safari 中测试）使用：
-webkit-appearance:none;
To see the effect, open jsfiddle examplewith webkit based browser, e. g. Safari.
要查看效果，请使用基于 webkit 的浏览器（例如 Safari）打开jsfiddle 示例。
More information on webkit restrictions of Search Inputs styling: LINK
有关搜索输入样式的 webkit 限制的更多信息：链接
Edit:
I misunderstood the question, because your css code was targeting the search input box. Based on the new HTML code, you should probably target the style of div with ID city_search_matches. How the results populate that div is unknown, so I cannot help you with any code examples.
编辑：我误解了这个问题，因为你的 css 代码是针对搜索输入框的。根据新的 HTML 代码，您可能应该以 ID 为目标的 div 样式city_search_matches。结果如何填充该 div 是未知的，因此我无法为您提供任何代码示例。
回答by Jatin
However I am not sure which auto complete control you are using .
但是我不确定您使用的是哪个自动完成控件。
If you are using Jquery AutoComplete then you can target using the below css
如果您使用的是 Jquery AutoComplete，那么您可以使用以下 css 定位
/*Css to target the dropdownbox*/
ul.ui-autocomplete {
color: red !important;
-moz-border-radius: 15px;
border-radius: 15px;
}
Above css will change the font color to Red and then make the corner to be rounded for dropdownoptions.
上面的 css 会将字体颜色更改为红色，然后为下拉选项使角变圆。
Complete Code:
完整代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
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 to target the dropdownbox*/
ul.ui-autocomplete {
color: red !important;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#search_input").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<input name="city" id="search_input" type="search" placeholder="City, ST">
</div>
</form>
</body>
</html>