option要素にtransformが効かない

Question

transform: scaleでoption要素のサイズを変えたいのですが反映されません
親要素のselectに設定しているのが悪いのかと思ってoption自体にも設定しましたが、同様に効きませんでした
option要素はtransformが効かない仕様になっているのでしょうか？何が原因なのか教えて頂きたいです

<select class='btn'>
  <option class="option">赤</option>
  <option class="option">青</option>
  <option class="option">緑</option>
</select>

.btn {
  width: 1000px;
  height: 600px;
  font-size: 400px;
  transform: scale(0.1);
}

Comments

[退会済みユーザー]

調べた事を書いて下さい

[flandre]

調べたこと…ですか？
「option transform 効かない」とかで調べてみましたが、これといって目ぼしい情報は見つかりませんでした

Answer 1

「Option css 効かない」をキーワードにググると、下記が一番上に表示されます。

【HTML】selectタグとoptionタグにCSSが効かない時の対処法！ | みずかず式！

transform以外でもほとんどのCSSが効きません。そういう仕様です。

対処法も上記に書いてあります。

Comments

[flandre]

なるほど、transformどころかCSSが効かない仕様と…。OSに依存した要素の場合そういうことが起きるんですね
教えて頂きありがとうございます

Answer 2

自己解決しました
optionにtransformが効かない理由は不明のままですが、font-sizeの％をscaleと同じ倍率にすることで疑似的にスケーリングできました