使用HTML5 <datalist>时是否可以设置下拉建议的样式？

Question

看到这里:http://jsfiddle.net/zemar (必须使用Firefox或Opera查看)

当您单击时select,下拉列表的样式将匹配,但如果您开始在文本框中的数据列表中键入一个术语,则显示的建议不会设置样式,因此它与其余部分不匹配造型.

是否可以设置下拉菜单的样式？

* {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>

Answer 1

datalist无法跨浏览器仅使用 CSS 进行样式设置。Internet Explorer、Firefox、Chrome 和 Edge 将基本样式应用于input[list]元素，但既不应用于datalist，也不应用于其option子元素。

请参阅CodePen 示例。

引用MDN “样式化 HTML 表单——丑陋的”：

某些元素根本无法使用 CSS 进行样式设置。其中包括：所有高级用户界面小部件，例如范围、颜色或日期控件；和所有的下拉窗口小部件，包括<select>，<option>，<optgroup>和<datalist>元素。

规避此 UI 限制的一种非常常见的方法是提供基于 JavaScript 的小部件，对于禁用 JS 的用户，该小部件回退到 HTML5 输入 + 数据列表组合。

Answer 2

据我所知，您无法设置<datalist>标签样式。我建议使用 JQuery 扩展自动完成。所以你需要在你的 html 文档中包含 JQuery。这是谷歌托管的链接：见这里

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script

注意：您可以通过将其包含在文档末尾并使用来获得更好的性能 $(document).ready();

例如：

HTML：

<input type='text' id='input'>

Javascript：

$(document).ready(function() {
    var arrayOfOptions = [
        "Option 1",
        "Option 2",
        "etc"
    ];

    $("#input").autocomplete({source: arrayOfOptions});
});

注意：未测试代码！

来源：http : //jqueryui.com/autocomplete/

您可以设置类似于您如何设置导航的样式。以下是您可以设置样式的一些类：

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