Ist es möglich, die Dropdown-Vorschläge bei Verwendung von HTML5 <datalist> zu gestalten?

Question

Siehe hier: http://jsfiddle.net/zemar (Muss Firefox oder Opera verwenden, um zu sehen)

Wenn Sie auf die Schaltfläche select Wenn Sie jedoch einen Begriff aus der Datenliste in das Textfeld eingeben, werden die angezeigten Vorschläge nicht formatiert, so dass sie nicht mit dem Rest der Formatierung übereinstimmen.

Ist es möglich, das Dropdown zu gestalten?

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

Answer 1

Styling datalist nur mit CSS ist nicht möglich in allen Browsern. Internet Explorer, Firefox, Chrome und Edge wenden ein grundlegendes Styling auf die input[list] Element, aber weder an datalist noch auf seine option untergeordnete Elemente.

Siehe CodePen-Beispiel .

Zitiert aus MDN "Gestaltung von HTML-Formularen - das Hässliche" :

Einige Elemente können nicht mit CSS gestaltet werden. Dazu gehören: alle erweiterten Widgets der Benutzeroberfläche, wie z. B. Bereichs-, Farb- oder Datumssteuerungen, und alle Dropdown-Widgets, einschließlich <select> , <option> , <optgroup> y <datalist> Elemente.

Eine sehr verbreitete Methode zur Umgehung dieser UI-Beschränkung besteht darin, ein JavaScript-basiertes Widget bereitzustellen, das auf die Kombination aus HTML5-Eingabe und Datenliste für Benutzer zurückgreift, die JS deaktiviert haben.

Answer 2

Meines Wissens nach kann man die <datalist> Tag. Ich empfehle die Verwendung der JQuery-Erweiterung autocomplete. Sie müssen also JQuery in Ihr HTML-Dokument einbinden. Hier ist ein Link, der von Google gehostet wird: Siehe aquí

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

Hinweis: Sie können eine bessere Leistung erzielen, wenn Sie dies am Ende des Dokuments einfügen und mit $(document).ready();

Zum Beispiel:

HTMLです：

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

Javascript:

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

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

Hinweis: nicht getesteter Code!

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

Sie können dies ähnlich gestalten, wie Sie eine Navigation gestalten. Hier sind einige Klassen, die Sie gestalten können:

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