Html 使用 HTML5 <datalist> 时是否可以设置下拉建议的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10062414/
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
Is it possible to style the drop-down suggestions when using HTML5 <datalist>?
提问by dudledok
See here: http://jsfiddle.net/zemar(Must use Firefox or Opera to see)
在这里看到：http: //jsfiddle.net/zemar（必须使用 Firefox 或 Opera 才能看到）
When you click on the select, the drop-down is styled to match, but if you start typing a term from the data-list in the text box the suggestions that appear aren't styled and therefore it doesn't match the rest of the styling.
当您单击 时select，下拉列表的样式会匹配，但是如果您开始从文本框中的数据列表中键入一个术语，则显示的建议没有样式，因此它与其余的不匹配造型。
Is it possible to style the drop-down?
是否可以设置下拉样式？
* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;
padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}
.select select {padding-top: 5px;}
.select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;
border: 1px solid #ccc;} <div class="select">
<select id="count">
<option value="1">A</option>
<option value="2">A pair of</option>
<option value="3">A few</option>
<option value="4">Four</option>
</select>
</div>
<div class="input">
<input type="text" id="query" list="ingredients" placeholder="lamb"></input>
<datalist id="ingredients">
<option value="lamb">
<option value="beef">
<option value="chicken">
<option value="fish">
<option value="vegetarian">
</datalist>
</div>回答by Android334
From the best of my knowledge you cannot style the <datalist>tag. I recommend using the JQuery extension autocomplete. So you're need to include JQuery in your html document. here is a link hosted by Google: See here
据我所知，您无法设置<datalist>标签样式。我建议使用 JQuery 扩展自动完成功能。所以你需要在你的 html 文档中包含 JQuery。这是谷歌托管的链接：见这里
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script
Note: you can get better performance by including this at the end of the document and using $(document).ready();
注意：您可以通过将其包含在文档末尾并使用来获得更好的性能 $(document).ready();
For example:
例如：
HTML:
HTML：
<input type='text' id='input'>
Javascript:
Javascript：
$(document).ready(function() {
var arrayOfOptions = [
"Option 1",
"Option 2",
"etc"
];
$("#input").autocomplete({source: arrayOfOptions});
});
note: not tested code!
注意：未测试代码！
Source: http://jqueryui.com/autocomplete/
来源：http: //jqueryui.com/autocomplete/
You can style this similarly to how you style a nav. Here are some classes you can style:
您可以将其设置为类似于导航的样式。以下是您可以设置样式的一些类：
.ui-autocomplete span.hl_results {background-color: #ffff66;}
.ui-autocomplete-loading {} //the object while it's loading (in the event of Ajax, in this case would not need this one
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 5px;
}
.ui-autocomplete li {font-size: 16px;}
html .ui-autocomplete {
height: 250px;
}
回答by Volker E.
Styling datalistwith CSS only is not possibleacross browsers.
Internet Explorer, Firefox, Chrome and Edge apply basic styling to the input[list]element, but neither to datalist, nor to its optionchild elements.
datalist无法跨浏览器仅使用 CSS 进行样式设置。Internet Explorer、Firefox、Chrome 和 Edge 将基本样式应用于input[list]元素，但既不应用于datalist，也不应用于其option子元素。
See CodePen example.
请参阅CodePen 示例。
Citing from MDN “Styling HTML forms – the ugly”:
Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including
<select>,<option>,<optgroup>and<datalist>elements.
某些元素根本无法使用 CSS 进行样式设置。其中包括：所有高级用户界面小部件，例如范围、颜色或日期控件；和所有的下拉窗口小部件，包括
<select>，<option>，<optgroup>和<datalist>元素。
A very common way to circumvent this UI limitation is to provide a JavaScript based widget, that falls back to the HTML5 input+datalist combination for users which have JS disabled.
规避此 UI 限制的一种非常常见的方法是提供基于 JavaScript 的小部件，对于禁用 JS 的用户，该小部件回退到 HTML5 输入 + 数据列表组合。
