【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;
}

background-imageを使う

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>単体で実現できるので、個人的にはこっちが好み。