BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
お問い合わせフォームなどの作成でプルダウンメニューを設置することがあると思います。
その際にselectで設置するのですが、デフォルトの場合ブラウザごとにデザインが変わってしまいます。
ページデザインのテイストに合わせるためにはプルダウンメニューもCSSでデザインを変えたいところです。
しかしselectには擬似要素が使えません。

今回は「プルダウンメニューの見た目を変えたい」という方向けにCSSの設定方法をご紹介いたします。

利用シーン

  • selectタグで作るプルダウンメニューの見た目をどうしても変えたいとき

要素・プロパティ

特殊なUI部品の見た目をなくす。

appearance: none;

サンプル

See the Pen
mdRzyyq
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

設定

フォーム部品の一部など、たとえばselectタグにはブラウザが用意した特殊なアピアランス(見た目)が用意されています。
このアピアランスが用意されている要素の中にはCSSで表示を完全に作り替えることができないものがあります。

ただし、appearanceプロパティを適用して、その値を「none」にすることで、フォーム部品に用意されているアピアランスそのものを非表示にすることができます。
いったんアピアランスを非表示にしてしまえば、あとはCSSを自由に見た目を作り替えることができます。

上記サンプルではappearanceプロパティを使って、selectタグ(プルダウンメニュー)の見た目をCSSで完全に作り替えています。
appearanceプロパティ以外に特殊な機能を使っているわけではありませんが、backgroundプロパティで複数の背景を指定していることに注目してください。
背景には、下向き矢印の画像と、背景色を適用しています。

<注意>appearanceプロパティを使用するのはどうしても見た目を変えたいときだけにしましょう

appearanceは少なくともいまのところCSSの標準仕様に含まれていない非公式のプロパティです。
ブラウザによって対応状況が違ったり、バージョンが変わると機能が変わったりすることがあるため、多用せず、「どうしても」プルダウンメニューなどの見た目を変えたい時だけ使用するようにしましょう。