web-dev-qa-db-ja.com

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>
csshtmlhtml-datalist
28
dudledok

私の知る限りでは、_<datalist>_タグのスタイルを設定することはできません。 JQuery拡張オートコンプリートを使用することをお勧めします。したがって、htmlドキュメントにJQueryを含める必要があります。これは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'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;
}
_
4
Android334

CSSのみでdatalistをスタイリングすることはできません。 Internet Explorer、Firefox、Chrome=およびEdgeは、input[list]要素に基本的なスタイルを適用しますが、datalistにも、そのoption子要素にも適用しません。

CodePenの例 を参照してください。

MDN“ HTMLフォームのスタイリング–醜い” からの引用：

一部の要素は、CSSを使用してスタイルを設定できないだけです。これらには、範囲、色、日付コントロールなどのすべての高度なユーザーインターフェイスウィジェットが含まれます。 <select>、<option>、<optgroup>、<datalist>要素を含むすべてのドロップダウンウィジェット。

このUIの制限を回避する非常に一般的な方法は、JavaScriptベースのウィジェットを提供することです。これは、JSが無効になっているユーザーのHTML5入力+データリストの組み合わせにフォールバックします。

3
Volker E.