プログラミング初心者にオススメ

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

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

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

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

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

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

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

selectタグにCSSを適用させる方法

appearance: noneを使用する

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

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

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

その他の方法

全てを自作する

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

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

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

CSSフレームワークを使用する

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

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

まとめ

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

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

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

みずかず

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です