在使用HTML5时，是否可以对下拉建议进行样式化？

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

仅使用CSS对DataList进行样式设置是不可能跨浏览器的。Internet Explorer、Firefox、Chrome和Edge将基本样式应用于输入[list]元素，但不应用于DataList及其选项子元素。

参见CodePen示例。

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

规避此UI限制的一个非常常见的方法是提供一个基于JavaScript的小部件，对于禁用JS的用户来说，它可以回到HTML5 Input+DataList的组合。