セレクトボックス(プルダウン)をCSSでカスタマイズする方法

セレクトボックス(プルダウン)をCSSでカスタマイズする方法
この記事は約15分で読めます。
当サイトはアフィリエイト広告を利用しています。

『nanailog』の制作中、Cocoonのレスポンシブテスト機能でスマホやタブレットの表示を確認していました。レスポンシブテストで問題がなくても、公開後実機で確認してみたら崩れてたりすることがあります。

公開後にフッターの部分をiPhoneで見てみたら、カテゴリーやアーカイブのセレクトボックス(プルダウン)がPCで確認してたデザインと異なってることに気付きました。

Chromeとsafariでのセレクトボックスの違い

selectタグにスタイルを指定してなかったので、ChromeとSafariでそれぞれデフォルトのセレクトボックスのデザインが表示されていたようです。

selectやinputはブラウザによってデフォルトのデザインが異なっています。ブラウザのデフォルトのスタイルをリセットした後にスタイルを当てることで、統一したデザインにすることができます。

デフォルトのスタイルをリセットすると矢印アイコンが消えてしまうので、CSSでカスタマイズして表示させる方法もご紹介します。

デフォルトのスタイルをリセットする

selectのデフォルトのスタイルをリセットするには、CSSで下記を指定すればOKです。

select{
 appearance: none;
}

これを指定してから、borderやbackground-colorなどでセレクトボックスをカスタマイズすれば、ブラウザ間で統一したデザインになります。

リセットするとプルダウンの矢印も消えます。消すことによって、矢印のデザインをカスタマイズすることができます。消したままにしておきたい方はここまでで大丈夫ですが、表示させたい方は次の手順に進んでください。

CSSで矢印をカスタマイズする

CSSで矢印をカスタマイズする方法を大きく分けて2通り紹介します。

  1. 疑似要素を使って矢印を作る
  2. Font Awesomeを使用する

①疑似要素で矢印を作る

矢印を作成するために疑似要素::beforeを使いますが、selectタグには疑似要素を適用できないため、divで囲ってそのdivに疑似要素を適用させます。borderで矢印を作成するパターンとclip-pathで矢印を作成するパターンの2つを紹介します。

borderで矢印を作成する

borderで作成した矢印のサンプルデザインはこちらです。

See the Pen
セレクトボックスデザイン01 by なないろ (@tflkhcei-the-vuer)
on CodePen.

<div class="selectbox">
  <select>
    <option value="">猫種を選択</option>
    <option value="1">ぶち猫</option>
    <option value="2">三毛猫</option>
    <option value="3">茶トラ</option>
    <option value="4">黒猫</option>
  </select>
</div>
select{
  appearance: none;
  width: 300px;/*セレクトボックスの横幅*/
  padding: 15px;
  color: #333;/*テキストの色*/
  border: 1px solid #5cc0b5;/*枠線の太さ・形状・色*/
  border-radius: 3px;/*枠線の角丸*/
  background-color: #fff;/*背景色*/
  cursor: pointer;/*マウスカーソルをポインターに*/
}
select:focus{  
  outline: none;/*focus時の枠線を消去*/
}
.selectbox{
  position: relative;
  width: 300px;/*親要素の横幅*/
}
.selectbox::before{
  position: absolute;
  top: 15px;/*矢印の上からの位置*/
  right: 20px;/*矢印の右からの位置*/
  content: '';
  width: 10px;/*矢印の横幅*/
  height: 10px;/*矢印の縦幅*/
  border-top: 2px solid #5cc0b5;/*矢印の線の太さと色*/
  border-left: 2px solid #5cc0b5;/*矢印の線の太さと色*/
  transform: rotate(-135deg);/*矢印を回転*/
  pointer-events: none;/*矢印部分をクリックできるようにする*/
}

::before要素で10×10pxの正方形を作り、その上辺と左辺にborderで線をつけ、それを-135°回転させて下向き矢印に見せています。図にするとこのような感じです。

borderで矢印を作成するイメージ図

clip-pathで矢印を作成する

clip-pathでも矢印が作れます。矢印と言うか下向き三角ですが。デザインサンプルはこちらになります。

See the Pen
セレクトボックスデザイン02 by なないろ (@tflkhcei-the-vuer)
on CodePen.

<div class="selectbox">
  <select>
    <option value="">猫種を選択</option>
    <option value="1">ぶち猫</option>
    <option value="2">三毛猫</option>
    <option value="3">茶トラ</option>
    <option value="4">黒猫</option>
  </select>
</div>
select{
  appearance: none;
  width: 300px;/*セレクトボックスの横幅*/
  padding: 15px;
  color: #333;/*テキストの色*/
  border: 1px solid #5cc0b5;/*枠線の太さ・形状・色*/
  border-radius: 3px;/*枠線の角丸*/
  background-color: #fff;/*背景色*/
  cursor: pointer;/*マウスカーソルをポインターに*/
}
select:focus{
  outline: none;/*focus時の枠線を消去*/
}
.selectbox{
  position: relative;
  width: 300px;/*親要素の横幅*/
}
.selectbox::before{
  position: absolute;
  top: 18px;/*矢印の上からの位置*/
  right: 20px;/*矢印の右からの位置*/
  content: '';
  width: 15px;/*矢印の横幅*/
  height: 10px;/*矢印の縦幅*/
  clip-path: polygon(0 0, 100% 0, 50% 100%);/*逆三角形の描画*/
  background-color: #5cc0b5;/*矢印の色*/
  pointer-events: none;/*矢印部分をクリックできるようにする*/
}

②Font Awesomeを使用する

Font Awesomeには矢印アイコンが豊富に用意されています。せっかくなら利用したいですよね。Font Awesomeを使用する方法を2パターン紹介しますが、selectに親要素がある場合は一つ目のやり方が楽なのでおすすめです。

selectの親要素の疑似要素にFont Awesomeを使用する方法

①でも説明しましたが、selectには::beforeや::afterなどの疑似要素を適用することができません。なので、親要素に疑似要素を指定してFont Awesomeのアイコンを表示させることになります。

サンプルデザインはこちらです。矢印にはcircle-chevron-downを使用しています。

See the Pen
セレクトボックスデザイン03 by なないろ (@tflkhcei-the-vuer)
on CodePen.

<div class="selectbox">
  <select>
    <option value="">食べたいごはんを選択</option>
    <option value="1">カリカリ</option>
    <option value="2">ちゅーる</option>
    <option value="3">かつお節</option>
    <option value="4">ささみ</option>
  </select>
</div>
select{
  appearance: none;
  width: 300px;/*セレクトボックスの横幅*/
  padding: 15px;
  color: #333;/*テキストの色*/
  border: 1px solid #5cc0b5;/*枠線の太さ・形状・色*/
  border-radius: 3px;/*枠線の角丸*/
  background-color: #fff;/*背景色*/
  cursor: pointer;/*マウスカーソルをポインターに*/
}
select:focus{
  outline: none;/*focus時の枠線を消去*/
}
.selectbox{
  position: relative;
  width: 300px;/*親要素の横幅*/
}
.selectbox::before{
  position: absolute;
  top: 15px;/*矢印の上からの位置*/
  right: 20px;/*矢印の右からの位置*/
  font: var(--fa-font-solid);/*FontAwesomeの指定*/
  content: '\f13a';/*アイコンのUnicode*/
  color: #5cc0b5;/*矢印の色*/
  pointer-events: none;/*矢印部分をクリックできるようにする*/
}

Font AwesomeのSVGコードをselectの背景に指定する方法

Font Awesomeを使いたいけどselectに親要素がない場合はこちらの方法を使ってください。テーマを使っている場合、HTMLを自由に編集できなくてselectを親要素で囲めない場合があるかと思います。なないろがそうだったのですが、この方法で解決できました。

サンプルデザインはこちらです。矢印にはcircle-chevron-downを使用しています。

See the Pen
セレクトボックスデザイン by なないろ (@tflkhcei-the-vuer)
on CodePen.

<select>
  <option value="">食べたいごはんを選択</option>
  <option value="1">カリカリ</option>
  <option value="2">ちゅーる</option>
  <option value="3">かつお節</option>
  <option value="4">ささみ</option>
</select>
select{
  appearance: none;/*ブラウザのスタイルをリセット*/
  width: 300px;/*セレクトボックスの横幅*/
  padding: 15px;
  color: #333;/*テキストの色*/
  border: 1px solid #5cc0b5;/*枠線の太さ・形状・色*/
  border-radius: 3px;/*枠線の角丸*/
  background-color: #fff;/*背景色*/
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%235cc0b5" d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM135 241c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l87 87 87-87c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 345c-9.4 9.4-24.6 9.4-33.9 0L135 241z"/></svg>');/*背景にFont AwesomeのSVGを指定*/
  background-size: 16px 16px;/*背景のサイズ*/
  background-repeat: no-repeat;/*背景の繰り返し*/
  background-position: top 15px right 15px;/*背景の表示位置*/
  cursor: pointer;/*マウスカーソルをポインターに*/
}
select:focus{
  outline: none;/*focus時の枠線を消去*/
}

background-imageにSVGコードを入れています。勿論、Font AwesomeからSVGファイルをダウンロードして、それをサーバーにアップしてurlにそのファイルのパスを指定するのでもOKです。しかし、WordPressでSVGファイルをアップするにはプラグインを入れたりしないといけないので、なないろはこのようにSVGコードを指定する方法を選択しました。

CSSで背景画像にFont AwesomeのSVGコードを指定するやり方を詳しく説明していきます。
まず、Font Awesomeの使いたいアイコンのページにアクセスしてください。色が決まっている場合はパレットアイコンをクリックし、「COLOR」セクションの一番右端をクリックして色を指定しておきます。

Font Awesome アイコンのカラー変更

「SVG」タブをクリックすると下にSVGコードが表示されます。コードをクリックするとコピペできます。

コピーしたコードをbackground-image:url('')の中に入れるのですが、ただ入れるだけでは表示されません。下記コードの「utf8,」の後ろから始まる<svg>～</svg>の部分がコピペしたSVGコードになります。

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%235cc0b5" d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM135 241c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l87 87 87-87c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 345c-9.4 9.4-24.6 9.4-33.9 0L135 241z"/></svg>');

注意するポイントは次の4点です。

  1. background-image: url()でコードを指定する際、シングルクォーテーションを用いる
  2. data:image/svg+xml;utf8をつける
  3. fillで色を指定しているが、カラーコードの#は%23に置き換える
  4. SVGコードに改行を入れない

特に注意したいのが3つ目です。Font Awesomeのcircle-chevron-downのSVGコードをコピペすると下記のようになっています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#5cc0b5" d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM135 241c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l87 87 87-87c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 345c-9.4 9.4-24.6 9.4-33.9 0L135 241z"/></svg>

fill=”#5cc0b5″の部分でアイコンのカラーを指定しているのですが、この「#」を「%23」に置き換えないと表示されないので気を付けてください。

なお、アイコンの色を変更したい場合はこのfillで指定している色を変更すればいいので、いちいちFont Awesomeから色を指定し直してコードを取得する必要はありません。

アイコンが背景画像として表示されたら後は大きさや表示位置の調整です。

background-sizeで背景の表示サイズを指定しています。

background-size: 16px 16px;

背景はリピートさせないのでbackground-repeat: no-repeat;を指定しています。

background-repeat: no-repeat;

background-positionで上から15px、右から15pxの位置に背景を表示させています。

background-position: top 15px right 15px;

これでselectに親要素がなくてもFont Awesomeのアイコンを矢印に使えます。

まとめ

ブラウザによってセレクトボックスの表示が全然違ってくるのはなかなか厄介ですね。リセットすると矢印が消えてしまうのも悩ましいです。矢印がある方がセレクトボックスであることが分かりやすいので、個人的にはリセットしても矢印は表示するようにしておくのがおすすめです。

なないろはフッターにあるセレクトボックスをカスタマイズしたかったのですが、<div>で囲まれてなかったので、どうにか親要素じゃなくてselectにFontAwesomeを使えないか調べた末、SVGコードを背景に指定するやり方に行きつきました。

タイトルとURLをコピーしました