フォームを使いやすくおしゃれなデザインにする場合、
扱いにくいのがselectタグです。
ちょっとしたコツを知ればselectタグのスタイルづけもカンタンなので、
今回はそれをまとめました。
さっそく実装！
つくったのは、このようなselectタグです。
どのような考え方でつくっていくか、ポイントをひとつずつ見ていきます。
ブラウザのデフォルトのスタイルをクリアする
まずは、ブラウザごとにデフォルトのスタイルが当たっていますので、それを打ち消します。
selectタグの打ち消しは、以下の記述でできます。
|
1 2 3 4 5 6 7 |
select { /* ブラウザのデフォルトのスタイルをクリアする */ -moz-appearance: none; -webkit-appearance: none; appearance: none; outline: none; } |
親要素で囲ってスタイル付けすると扱いやすい
selectタグはinline-blockの性質がデフォルトです。
大きさ自体は親要素で指定して（ここでは.wrapper）、
selectタグは親要素いっぱいに広がるようすると扱いやすいです。
また、selectタグは、直接擬似要素を付与することができません。
今回は矢印をつけたいので、
selectタグを親要素で囲い、親要素に対して擬似要素でスタイルづけする方法をとります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
select { /* サイズは親要素いっぱいになるようにすると扱いやすい */ width: 100%; height: 100%; } /* 以下、親要素に設定 ・サイズの指定 ・擬似要素の指定 */ .wrapper{ width: 300px; height: 60px; position: relative; } |
準備が整ったところでスタイルづけ
ではいよいよスタイルをつけていきます。
selectタグに直接背景色やボーダー、テキストなどの指定をしていきますが、
先述の通り、デフォルトのスタイルはすべて取っ払っているので
矢印は任意でつける必要があります。
今回は、親要素に対して擬似要素::beforeで矢印をつけています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
select { /* 以下スタイルづけ */ border: 2px solid #ff2e63; background-color: #fff5f4; border-radius: 5px; color: #ff2e63; font-size: 1.1rem; font-weight: bold; padding: 5px 10px; } /* 擬似要素で矢印をつける */ .wrapper::before{ content: ""; border-top: 12px solid #ff2e63; border-right: 8px solid transparent; border-left: 8px solid transparent; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } |
※CSSでつくる矢印は、こちらも参考にしてみてください。
→コピペでOK！画像を使わずCSSで三角形をつくる方法×2｜nico MEMO
まとめ
以上、selectタグのスタイルをCSSでカスタマイズする方法をご紹介しました。
ポイントは、
- ブラウザのデフォルトのスタイルをクリアする
- selectタグを親要素で囲う
の2点です。
これらを踏まえて、使いやすいフォーム作成にお役立てください！
コメント