HTML5データリストオプションにCSSスタイルを適用する方法はありますか?


84

データリストのさまざまなオプションのリストの表示方法を変更したいと思います。いくつかのCSSプロパティを適用することは可能ですか?

<input list="languages" id="language_id">
<datalist id="languages">
      <option value="html">HTML</option>
      <option value="java">Java</option>
      <option value="perl">Perl</option>
      <option value="php">PHP</option>
      <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

私は試した

option {
    background: red;
}

しかし、それは機能していないようです。


回答:


82

select要素と同様に、datalist要素のスタイル設定の柔軟性はほとんどありません。それがあなたの質問が求めていたものである場合、提案された用語のいずれもスタイルを設定することはできません。

ブラウザは、これらの要素に対して独自のスタイルを定義します。


136
これはとても悲しいです
ロイドバンクス

4
関連:(例:プレースホルダ含まれていますが、データリストのような何もない)Firefoxのベンダー固有のCSSの拡張機能のリスト:developer.mozilla.org/en-US/docs/Web/CSS/Reference/...
ANevesは、SEは悪であると考えて


-6

試してください:

input[list]
{
  background: red;
}

5
Firefox 30ではinput[list]、テキストボックスのスタイルを設定しますが、リストのスタイルは設定しません。IE 11では、テキストボックスリストのスタイルを設定します。
ダレングリフィス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.