是否有可能当使用样式下拉建议HTML5 ？(Is it possible to style t

在这里看到： 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>标签。我建议使用jQuery扩展自动完成。所以你需要包括JQuery的你的HTML文件内。这里是由谷歌主办的链接：请参见这里

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