select要素のアイコンを変更する方法

select 要素の見た目をCSSで変更する際、appearance: none でブラウザデフォルトのスタイルを削除してオリジナルのアイコン（矢印）を表示しようとしたが、そこまで自由度が高くないことがわかった。

カスタムアイコンの実装方法としてまず考えられるのは次の2通りだと思う:

• select 要素の隣に svg などを置く。
• select::after などの疑似要素を使う。

僕の場合、今回はあくまでも select を単独で使いたかったので前者は除外した。となると疑似要素だが、これはうまくいかなかったため、結局は3つ目の手段を使うことにした。

問題点: selectには疑似要素を設定できない

problem with <select> and :after with CSS in WebKitI would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML: &lt;select name=""&gt; &lt;option value=""&gt;Tes...stackoverflow.com

上記のStackOverflowの回答にもあるように、 select::after を指定してもブラウザに無視される。 Webkitで、ということだがFirefoxで試しても同様だった。

対応策: background-image

結局 background-image を設定することで対応した。

select {
  background-image: url("data:image/svg+xml;base64,<base64-encoded-svg ... >");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1em 1em;
}

これだとアイコンの色をCSSから変更できないのであまりうれしくない。 background-color を変えればもちろん背景色に適用されてしまう。ダークテーマなどに対応する場合に問題になる場合があるかもしれないが、とりあえずは決め打ちにした。必要になればメディアクエリでアイコンを指定することもできるとはいえ、利便性は下がる。（GitHubのPrimer CSSも同じようにbackground-imageにsvgをハードコーディングしている）

ちなみにアイコン単体であれば mask-image を使うことでURL指定されたアイコンの色を変え（ているように見せ）ることができるが、おそらく今回の用途には使えない。

まとめ

Open UIのSelect に期待したい。