Можно ли стилизовать раскрывающиеся предложения при использовании HTML5 <datalist>?

Смотрите здесь: http://jsfiddle.net/zemar (Должен использовать Firefox или Opera)

Когда вы нажимаете на select, выпадающее меню соответствует стилю, но если вы начинаете вводить термин из списка данных в текстовом поле, то предлагаемые предложения не стилизованы и, следовательно, t соответствует остальной части стиля.

Можно ли стиль выпадающего списка?

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

Ответы

Ответ 1

Насколько я знаю, вы не можете создать тег <datalist>. Я рекомендую использовать автозаполнение расширения JQuery. Поэтому вам нужно включить JQuery в свой html-документ. вот ссылка, размещенная Google: см. здесь

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

Ответ 2

Стиль datalist с CSS только невозможно в браузерах. Internet Explorer, Firefox, Chrome и Edge применяют базовый стиль к элементу input[list], но ни к datalist, ни к его дочерним элементам option.

См. Пример CodePen.

Цитирование из MDN "Стилирование HTML-форм - уродливое" :

Некоторые элементы просто не могут быть написаны с использованием CSS. К ним относятся: все расширенные виджеты пользовательского интерфейса, такие как управление диапазоном, цветом или датой; и все выпадающие виджеты, включая элементы <select>, <option>, <optgroup> и <datalist>.

Очень распространенным способом обойти это ограничение пользовательского интерфейса является предоставление виджета на основе JavaScript, который возвращается к входу HTML5 + datalist для пользователей, у которых отключен JS.