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

どうも。みずかず(@mizukazu_1)です。

今回はHTMLのselectタグとoptionタグにCSSが効かない件について解説していきます。
もしかしたら知っている人も多いかと思いますが、僕自身の備忘録も兼ねて書いていきます。

selectタグ及びoptionタグにCSSが効かない理由

結論から述べるとそういう仕様だからです。

HTML標準の<select>はOS依存なのでこちら側から制御出来る範囲というのが限られているみたいです。
なので、CSSが効かないという事象が起こります。

また、<option>に関しても同じくです。

appearance: noneを使用すると<select>の標準のスタイルを無効にすることが出来ます。
適用後であれば比較的柔軟にスタイルを当てられるようになります。

ChromeやFirefoxで使用する場合にはベンダープレフィックスが必要です。(-webkit-や-moz-など)

IEではappearanceは使用できません。

もし時間に余裕があれば、<div>や<radio>、JavaScriptなどを使用して自作するのが一番良いかと思います。
かなり柔軟にデザインを出来ますし、凝ったセレクトボックスが作れます。

問題点としては時間がものすごくかかるという点です。
ブラウザ間の違いなどを考慮しながら作成しなければいけないので膨大な時間がかかります。

実務で使用するなどの条件の場合、この方法は現実的ではないですね。。。

こちらの方法が一番現実的だと思います。
BootstrapやBulmaなどのCSSフレームワークを使用する事で良いデザインのセレクトボックスを使用出来ます。

また、カスタマイズも出来るのでオススメです。

今回は<select>、<option>にCSSが効かない件について解説しました。

もし間違っている個所がありましたらお問い合わせから指摘をお願いします。

また、他の情報が分かり次第この記事に追記をしていきます。

みずかず

最後まで読んでいただきありがとうございました！