セレクトボックスの矢印アイコンを変更する方法【HTML/CSS・サンプルコード付き】

<!-- セレクトボックスと独自矢印を囲む要素 -->
<div class="custom-select-arrow_wrap">

  <!-- セレクトボックス -->
  <select
    class="custom-select-arrow_select"
    id="prefecture"
    name="prefecture">

    <option value="">選択してください</option>
    <option value="hokkaido">北海道</option>
    <option value="tokyo">東京都</option>
    <option value="osaka">大阪府</option>
    <option value="fukuoka">福岡県</option>

  </select>

  <!-- CSSで作成する独自矢印 -->
  <span
    class="custom-select-arrow_icon custom-select-arrow_icon--selected"
    aria-hidden="true">
  </span>

</div>

/* セレクトボックスと独自矢印を囲む要素 */
.custom-select-arrow_wrap{
  position:relative; /* 独自矢印をこの要素を基準に配置 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
}

/* セレクトボックス本体 */
.custom-select-arrow_select{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:16px 60px 16px 16px; /* 右側へ60pxの余白を付け、文字と矢印の重なりを防ぐ */
  border:2px solid #cbd5e1; /* 枠線の太さ・種類・色 */
  border-radius:12px; /* 値を大きくすると角の丸みが強くなる */
  background:#ffffff; /* セレクトボックスの背景色 */
  color:#111827; /* 選択項目の文字色 */
  font-size:16px; /* 値を大きくすると文字が大きくなる */
  line-height:1.5; /* 値を大きくすると行間が広がる */
  appearance:none; /* ブラウザ標準の矢印を非表示 */
  -webkit-appearance:none; /* Safariで標準の矢印を非表示 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* セレクトボックスへフォーカスした状態 */
.custom-select-arrow_select:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,0.18); /* フォーカス位置を示す外枠 */
  outline-offset:2px; /* 値を大きくすると外枠が外側へ離れる */
}

/* 独自矢印の共通表示エリア */
.custom-select-arrow_icon{
  position:absolute; /* セレクトボックスの上へ重ねて配置 */
  top:50%; /* 縦方向の中央を基準にする */
  right:20px; /* 値を大きくすると矢印が左へ移動する */
  display:flex; /* 矢印を中央配置する */
  align-items:center; /* 縦方向の中央へ配置 */
  justify-content:center; /* 横方向の中央へ配置 */
  width:24px; /* 矢印を表示する領域の横幅 */
  height:24px; /* 矢印を表示する領域の高さ */
  transform:translateY(-50%); /* 自身の高さの半分だけ上へ移動して中央配置 */
  pointer-events:none; /* 矢印がクリック操作を妨げないようにする */
  box-sizing:border-box; /* borderを横幅と高さへ含める */
}