すごく地味な話ですが、カンプ通りにしようと思ったらデフォルトの矢印では駄目な場合があります。
今回はデフォルトの矢印を非表示にして、カンプ通りの矢印にする方法について解説します。
セレクトボックスの矢印のデザインを変更する方法
セレクトボックスの矢印のデザインを変更する為には、擬似要素や画像を使います。
ただしselectタグには擬似要素が使えないのでdivタグで囲ったり、画像を使う時には擬似要素は使わないなど微妙な違いがあるので、その辺をこれから詳しく解説していきます。
通常のセレクトボックス
まずは通常のセレクトボックスのデザインを見てみます（コードを見るには左上のHTML、CSSをクリックして下さい）
See the Pen
セレクトボックスの矢印のデザイン（デフォルト） by junpei (@junpei-sugiyama)
on CodePen.
右に下向きの矢印がありますね。
今回はこれをカンプ通りに、自由にデザイン出来るようにしたいと思います。
セレクトボックスの矢印のデザインを擬似要素を使って変える
次は矢印のデザインを変えたやつを見てみましょう。
See the Pen
セレクトボックスの矢印のデザイン変更 by junpei (@junpei-sugiyama)
on CodePen.
今回追記されたコードはこちらです。
select {
-webkit-appearance: none;
appearance: none; /* デフォルトのスタイルを無効 */
}
select::-ms-expand {
display: none; /* デフォルトのスタイルを無効(IE用) */
}
/* セレクトボックスの矢印デザイン変更 */
.container::before {
border-bottom: 4.5px solid red;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
content: "";
position: absolute;
right: 9px;
top: 10px;
width: 0;
}
.container::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4.5px solid red;
content: "";
position: absolute;
right: 9px;
top: 21px;
width: 0;
}ポイントとなるのは最初の2つ
select {
-webkit-appearance: none;
appearance: none; /* デフォルトのスタイルを無効 */
}
select::-ms-expand {
display: none; /* デフォルトのスタイルを無効(IE用) */
}このコードでデフォルトのスタイルを無効化し、矢印を非表示にしています。
またIEでは appearance が使えない為、-ms-expandを使って非表示にしています。
あとは擬似要素を使ってデザインすればOKですが、ここで注意点が1つ
selectタグに ::before や ::after といった擬似要素は使えません
なので今回はselectに対してdivタグで囲い、それに対して擬似要素を使っています。
セレクトボックスの矢印のデザインを画像に変える
先ほどはcssで表現できるデザインだったので擬似要素を使いましたが、画像にしたい時もあるかと思います。
そういった場合はこのようになります。
See the Pen
セレクトボックスの矢印を画像に変更 by junpei (@junpei-sugiyama)
on CodePen.
デフォルトのデザインを無効化するのは先ほどと同じです。
そして今回は擬似要素は使わず、background-image を使います。
select {
background-image: url(画像のパス);
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 13px 13px;
}background-positionで画像の位置、background-sizeで画像のサイズを調整します。
以上です。
ちなみに画像はicooon-monoというサイトからダウンロードしました。
このサイトの使い方については以下の記事を参照下さい。