大佬教程收集整理的这篇文章主要介绍了使用html5 datalist时可以设置下拉式建议吗？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当您单击选择时，下拉列表的样式可以匹配，但如果您从文本框中的数据列表中开始输入一个术语，则显示的建议不会被设计，因此与其余的造型。
是否有可能风格的下拉？
* {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>
< 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; }
以上是大佬教程为你收集整理的使用html5 datalist时可以设置下拉式建议吗？全部内容，希望文章能够帮你解决使用html5 datalist时可以设置下拉式建议吗？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。