セレクトボックスなどに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月現在)