select要素に::beforeや::afterの疑似要素を設定したい場合の対処法！

select要素に::beforeや::afterの疑似要素を設定して、文字を挿入したり、三角ボタンを他のものに変えたいという事がありますが、select要素そのものに擬似要素を設定するとうまくいきません。

もしselect要素そのものに擬似要素を設定してしまうと以下のようになります。

このサンプルコードではCSSでセレクトボックスの三角ボタンを丸ボタンに変えるためのものですが、select要素は擬似要素が効かないので全く変化がないです。

ではどのようにすればセレクトボックスに擬似要素を効かせることができるのか以下の項目で解説します。

select要素に::beforeや::afterの疑似要素を設定したい場合、select要素に対して親要素を付与して、その親要素に対して擬似要素を設定する必要があります。

このようにHTML側でselect要素を囲み、それに対して擬似要素を設定することで効かせることができました。

いかがでしたでしょうか？

select要素に::beforeや::afterの疑似要素を設定したい場合、HTMLで少し工夫をするだけで設定できることが分かりました。

ぜひここで紹介した方法を試してみてください。