CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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

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

ただし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というサイトからダウンロードしました。

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

あわせて読みたい
フリーアイコン素材サイト icooon-monoの使い方
【商用利用可】フリーアイコン素材サイト『icooon-mono』の使い方【色変更なども解説】

続きを見る

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

あわせて読みたい
【HTML】セレクトボックスで1行目を選択不可にする方法
【HTML】セレクトボックスで1行目を選択不可にする方法

続きを見る

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作