【CSS】select（セレクトボックス）の矢印のデザインをカスタマイズする方法

お問い合わせフォームのセレクトボックスの矢印のデザインを変える方法ない？

すごく地味な話ですが、セレクトボックスの矢印をデザイン通りにしようと思ったら、デフォルトの矢印では駄目な場合があります。

これは、CSSでカスタマイズすることが出来ます（画像にも出来ます）

今回はデフォルトの矢印を非表示にして、デザイン通りの矢印にする2つの方法についてコードとデモで解説していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

CSSでselect（セレクトボックス）の矢印のデザインをカスタマイズする方法

セレクトボックスの矢印のデザインを変更する為には、デフォルトの矢印を非表示にした上で擬似要素や画像を使います。

ただしselectタグには擬似要素が使えないのでdivタグで囲ったり、画像を使うときには擬似要素は使わないなど微妙な違いがあるので、その辺をこれから詳しく解説していきます。

通常のセレクトボックス

まずは、通常のセレクトボックスの矢印を見てみます（コードを見るには左上のHTML、CSSをクリックして下さい）。

See the Pen
セレクトボックスの矢印のデザイン（デフォルト） by junpei (@junpei-sugiyama)
on CodePen.

右に下向きの矢印がありますね。

今回は、これをデザイン通りに出来るようにしたいと思います。

セレクトボックスの矢印のデザインを擬似要素を使って変える方法

次は矢印のデザインを変えたやつを見てみましょう。

See the Pen
セレクトボックスの矢印のデザイン変更 by junpei (@junpei-sugiyama)
on CodePen.

CSSのコード

追記した分だけですが、CSSの書き方はこちら。

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.

デフォルトのデザインを非表示するのは先ほどと同じです。

CSSのコード

そして今回は擬似要素は使わず、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というサイトからダウンロードしました。

このicooon-monoの使い方については以下の記事を参照下さい。

また、1行目を選択不可にさせる方法は以下の記事を参照下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！