擬似要素 ::before, ::afterに指定したSVGの色を変えるCSS

セレクトボックスなどにSVGのアイコンを付けたい。でもSVGの色が変わらない！そんなときの対処法。

やりたいこと

こんな感じ↓でSVGアイコンの色を変えたいよ。

擬似要素に指定したSVGの色を変えるCSS

<div class="button">SELECT</button>

.button {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  justify-content: space-between;
  border: 1px solid #ccd;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}

.button::after {
  content: "";
  width: 1.5rem;

  -webkit-mask-image: url(down.svg);
  mask-image: url(down.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: salmon;
}

.button::after の部分はすべて必要な記述です。

擬似要素に直接背景色を指定して、mask-image を使ってSVGの形でマスクする。そんな方法になります。

-webkit- のベンダープレフィックスは、ChromeやEdgeなどの主要ブラウザでも依然必要です。（2023年8月現在）