2018.06.11

コーディング

セレクトボックスをCSSのappearanceを使ってカスタマイズする方法

リストから選ぶイメージ

サイトのデザインによってセレクトボックスの見た目をカスタマイズしたい場合があります。その際に便利なcssプロパティがappearanceです。appearanceプロパティはユーザーが利用するプラットフォームに応じて、 要素がその環境における標準的なUI(ユーザーインターフェース)のような外観になるよう指定することができるものですが、外観の編集を行うのが容易なプロパティです。
今回はそんなappearanceプロパティを使ったセレクトボックスのカスタマイズ方法を紹介します。

appearanceを使ったカスタマイズ

セレクトボックスの見た目をappearanceで解除

HTMLで標準的なセレクトボックスを制作し、appearance:noneでその見た目をすべて解除します。見た目は以下のようになります。

See the Pen oyBKKR by hoshu_t (@hoshu_t) on CodePen.

右端の矢印など、プラットフォーム特有の見た目を消すことができます。

スタイルで装飾

ボーターの色や背景色など、cssで任意の見た目に装飾します。

See the Pen bKgJgd by hoshu_t (@hoshu_t) on CodePen.

IEでの処理

IEではappearanceプロパティだけではうまく機能しません。IE10以降であれば、下記のような追加のコードで対応可能です。

select::-ms-expand {
	display: none;
}

まとめ

ほとんどのモダンブラウザでselectタグの見た目を自由にカスタマイズすることができます。サイトデザインをプラットフォームごとに統一する必要が出た際にご利用ください。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する