画像・擬似要素・アイコンフォント… 豊富なサンプルで解説！セレクトボックスの矢印スタイル変更

2024-05-23

CSS でセレクトボックスの矢印スタイルを変更する方法

背景画像を使用して、矢印アイコンを自由に設定できます。

select {
  background-image: url('矢印アイコン.png'); /* 矢印アイコンの画像パス */
  background-repeat: no-repeat;
  background-position: right center; /* 矢印アイコンの位置 */
  padding-right: 20px; /* 矢印アイコンと選択肢の間隔 */
}

擬似要素を使用する

擬似要素 ::before と ::after を使用して、三角形などの矢印を作成できます。

select {
  appearance: none; /* デフォルトの矢印を非表示 */
}

select::after {
  content: '';
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000; /* 矢印の色 */
  border-left: 5px solid;
  margin-right: 10px; /* 矢印と選択肢の間隔 */
}

Font Awesomeなどのアイコンフォントを使用すれば、様々な矢印アイコンを簡単に設定できます。

select {
  font-family: 'FontAwesome', sans-serif; /* Font Awesomeフォントを指定 */
  content: '\f0da'; /* 矢印アイコンのコード */
  display: inline-block;
  padding-right: 20px; /* 矢印アイコンと選択肢の間隔 */
}

補足

上記はあくまで基本的な例です。デザインに合わせて、様々なスタイルを調整できます。
セレクトボックスの幅や高さを調整する場合は、width と height プロパティを使用します。
矢印の位置を調整する場合は、background-position または margin プロパティを使用します。
矢印の色を変更する場合は、border-color プロパティを使用します。
複数の方法を組み合わせて使用することもできます。

セレクトボックスの矢印スタイルを変更するサンプルコード

背景画像を使用する

select {
  background-image: url('https://i.imgur.com/arrow-down.png'); /* 矢印アイコンの画像URL */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

このコードは、https://i.imgur.com/arrow-down.pngにある矢印アイコン画像を、セレクトボックスの右端に表示します。矢印アイコンと選択肢の間隔は、padding-right プロパティで調整しています。

擬似要素を使用する

select {
  appearance: none;
}

select::after {
  content: '';
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000;
  border-left: 5px solid;
  margin-right: 10px;
}

このコードは、擬似要素 ::after を使用して、下向きの三角形の矢印を作成します。矢印の色は、border-top-color プロパティで変更できます。矢印と選択肢の間隔は、margin-right プロパティで調整しています。

Font Awesomeなどのアイコンフォントを使用する

select {
  font-family: 'FontAwesome', sans-serif;
  content: '\f0da';
  display: inline-block;
  padding-right: 20px;
}

このコードは、Font Awesomeのアイコンフォントを使用して、下向きの矢印アイコンを表示します。矢印アイコンのコードは、content プロパティに指定します。矢印と選択肢の間隔は、padding-right プロパティで調整しています。

これらのサンプルコードを参考に、お好みのスタイルのセレクトボックスを作成してみてください。

セレクトボックスの矢印スタイルを変更するその他の方法

SVG を使用する

SVG 画像を使用して、より複雑な矢印アイコンを作成できます。

select {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%20%24%20height%3D%24%20viewBox%3D%20%220%200%24%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%208%20l-6%206%202.121%202.121%20-4.242%4.242%2%2%2%2%2%2%2%2%2L12%16%20l6-6z%22%20fill%3D%23000%2F%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

このコードは、SVG 画像データを直接 background-image プロパティに指定しています。矢印の色は、fill 属性で変更できます。

CSS グラデーションを使用して、矢印を作成できます。

select {
  background-image: linear-gradient(to right, transparent 0%, #000 50%, transparent 100%);
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

このコードは、右から左に向かって透明から黒、そして再び透明に変化するグラデーションを作成します。矢印の色は、グラデーションの色を変更することで調整できます。

select {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) inset;
  padding-right: 15px; /* 矢印と選択肢の間隔 */
}

select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000;
  border-left: 5px solid;
}

このコードは、ボックスシャドウを使用して三角形の矢印を作成します。矢印の色は、box-shadow プロパティの color プロパティで変更できます。

JavaScript を使用して、矢印のデザインをより動的に変更できます。

const selects = document.querySelectorAll('select');

for (const select of selects) {
  const arrow = document.createElement('span');
  arrow.classList.add('arrow');
  select.parentNode.insertBefore(arrow, select.nextSibling);

  select.addEventListener('change', () => {
    arrow.style.transform = `rotate(${select.selectedIndex * 180}deg)`;
  });
}