在使用HTML5< datalist>时，是否可以设置下拉式建议？ [英] Is it possible to style the drop-down suggestions when using HTML5 <datalist>?

问题描述

请看这里： http://jsfiddle.net/zemar
（必须使用Firefox或Opera看）

当您点击选择时，下拉框的样式会匹配，但如果您开始在文本框中的数据列表中键入术语，出现的建议不是样式的，因此它与样式的其余部分不匹配。

是否可以设置下拉式样？

* {margin：0;填充：0; font-family：arial，sans-serif; font-size：40px; font-weight：bold;颜色：＃444;} body {height：100％;背景：＃F4F3EF;}。select select，.input input {background：transparent; width：220px;溢出：隐藏;高度：65px; padding-left：5px; padding-bottom：5px; -webkit-appearance：none; -moz-外观：无;外观：无;边界：无; cursor：pointer;} select select {padding-top：5px;}。select，.input {float：left; width：220px;高度：65px; margin-right：20px;溢出：隐藏;背景：#ddd; border：1px solid #ccc;}

< div class = 选择 > < select id =count> < option value =1> A< / option> < option value =2>一对< / option> < option value =3>几个< / option> < option value =4>四个< / option> < /选择> < / DIV> < div class =input> < input type =textid =querylist =ingredientsplaceholder =lamb>< / input> < datalist id =成分> < option value =lamb> < option value =牛肉> < option value =chicken> < option value =fish> < option value =素食者> < /数据列表> < / div>

解决方案

据我所知，你不能设计< datalist> 标签。我建议使用JQuery扩展自动完成。所以你需要在你的html文档中包含JQuery。这里是Google托管的链接：请参见 here

< script src =// ajax.googleapis.com/ajax/libs/jquery/1.10.2 /jquery.min.js\"></script

注意：通过在文档和使用 $（document）.ready（）;

例如：

HTML：

 < input type ='text'id ='input'> 
  

Javascript：

 < code $ $（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 {} //加载对象（在Ajax的情况下，在这种情况下不需要这个）
 .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; 
} 
  

See here: http://jsfiddle.net/zemar (Must use Firefox or Opera to see)

When you click on the select, the drop-down is styled to match, but if you start typing a term from the data-list in the text box the suggestions that appear aren't styled and therefore it doesn't match the rest of the styling.

Is it possible to style the drop-down?

* {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>

解决方案

From the best of my knowledge you cannot style the <datalist> tag. I recommend using the JQuery extension autocomplete. So you're need to include JQuery in your html document. here is a link hosted by Google: See here

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script

Note: you can get better performance by including this at the end of the document and using $(document).ready();

For example:

HTML:

<input type='text' id='input'>

Javascript:

$(document).ready(function() {
    var arrayOfOptions = [
        "Option 1",
        "Option 2",
        "etc"
    ];

    $("#input").autocomplete({source: arrayOfOptions});
});

note: not tested code!

Source: http://jqueryui.com/autocomplete/

You can style this similarly to how you style a nav. Here are some classes you can style:

.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>时，是否可以设置下拉式建议？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！