selectタグ optionの中身にCSSでスタイルを適用したい

Question

<select> <option>aaa(10)</option> <option>bbb(100)</option> <option>ccc(1)</option> </select>

()内の数値だけ、文字サイズを大きくして色を変更する方法は何かありますでしょうか。

Answer 1

おそらく無理です。<option>のリストのスタイルは、ふつうに制御できる対象ではありません。

Comments

[退会済みユーザー]

ありがとうございます。

Answer 2

jQueryの拡張select2などを利用して疑似セレクトボックスを使えばデザインに
幅をもたせることは可能です

Comments

[退会済みユーザー]

ありがとうございます。

Answer 3

こんばんは。

数字だけフォントを変えるみたいなことならできます。

サンプル

@font-face {
  font-family: 'Diplomata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/diplomata/v12/Cn-0JtiMXwhNwp-wKxyvZ2ZZ.woff2) format('woff2');
  unicode-range: U+0030-0039;
}

option {
    font-family: "Diplomata";
    font-size: 100%;
}

残念ながら、Firefoxでは動作しませんでしたが、Chromeは動作しました。

Comments

[退会済みユーザー]

ありがとうございます！

unicode-range
知りませんでした。

Chromeだけでも助かります。
早速試してみます。