见:
http://jsfiddle.net/zemar
(必须使用Firefox或Opera查看)
(必须使用Firefox或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; }