datalistのlabelにCSSを当てることは可能でしょうか？

Question

前提・実現したいこと

datalistにCSSを当てたいです。
datalistのoptionのlabel（提示しているソースのcurryやHamburgerに当たる部分です。）にCSSを当てる方法はありますでしょうか？

以下で開発しております。
リンク内容

該当のソースコード

<label>
  好きなご飯は？
  <input name="fav_food" list="foods_list">
  <datalist id="foods_list">
    <option value="カレー" label="curry">
    <option value="ハンバーガー" label="Hamburger">
    <option value="ステーキ" label="steak">
  </datalist>
</label>

試したこと

＃foods_list option label{
}
ではCSSは当たりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

「datalist css」で調べたら下記のような記事が出てくるように、cssではできません。
HTML5で使用するdatalist,option,select,optgroupはCSSが適用できない。代わりにJavaScriptでDOM要素を変更する必要がある

JavaScriptで擬似的に適用可能な要素作るしかないですね。
この手の技はCSSフレームワークやjQueryプラグインではよく使われています。

※ただそもそも試されたコードは#が全角ですしlabelタグに対する指定なので、
たとえ仕様上できたとしてもlabel属性に対しては効果はないです。

属性セレクタは覚えておいたほうが良いです。

• 属性セレクタ

Comments

[toyamal]

ありがとうございます！
JavaScriptで擬似的に適用可能な要素を作る。という方法がわかりません。。
参考になるURL等ありますでしょうか？

[m.ts10806]

キーワードは入れてます。
>この手の技はCSSフレームワークやjQueryプラグインではよく使われています。

CSSフレームワークだとMaterialize,Bootstrapなど。
jQueryプラグインならたくさんあります。jQuery Mobileなんかもかなり作り込まれています。
いずれも「ブラウザ依存を吸収した同じレイアウト、同じ挙動」が目的です。

[m.ts10806]

datalistの目的はサジェストなので、datalistでの対応というより類似のものを別で作るとしたほうが見つかります。キーワードはサジェスト。

Answer 2

2021年5月現在、どのブラウザでも不可能だと思われます。
ポップアップ内に表示される<option>のラベルは CSS box ではない、という扱いのようです。