见：
http://jsfiddle.net/zemar
(必须使用FF或Opera才能看到)
(必须使用FF或Opera才能看到)
当您单击选择时，下拉列表的样式可以匹配，但如果您从文本框中的数据列表中开始输入一个术语，则显示的建议不会被设计，因此与其余的造型。
是否有可能风格的下拉？
* {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>
解决方法
从我所知，你无法设计< datalist>标签。我建议使用JQuery扩展自动完成。所以你需要在你的html文档中包含JQuery。这是由Google托管的链接：请参阅
here
< script src =“// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"\u0026gt;\u0026lt;/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;
}
