【CSS】セレクトボックスの矢印を擬似要素無しでカスタマイズする

セレクトボックスのデフォルトの矢印や三角形を消してオリジナルのものを表示したい場面があるが、<select>に擬似要素は設定できないので少し困る。

任意のタグでラップして擬似要素を使う

何らかのタグでラップしてそちらの擬似要素を使用する方法。

<label>
  <select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
  </select>
</label>

label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

label::after {
  position: absolute;
  right: 1rem;
  width: 10px;
  height: 7px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  content: '';
  background-color: #333;
}

select {
  padding: 0.75rem 2.75rem 0.75rem 0.75rem;
  appearance: none;
}

HTML・CSSでつくるセレクトボックスのデザインのパーツでもこの方法を採用している。

background-imageを使う

background-imageで矢印を表現する方法 (参考)。

<select>
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>

select {
  padding: 0.75rem 2.75rem 0.75rem 0.75rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #333 50%),
    linear-gradient(135deg, #333 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    calc(100% - 20px) calc(1rem + 1px),
    calc(100% - 15px) calc(1rem + 1px);
  background-size: 5px 5px;
}

ラップ用のタグを増やさずに<select>単体で実現できるので、個人的にはこっちが好み。