SELECTタグのアピアランスを、何がなんでもCSSだけでどうにかしたいあなたへ

ググるとラッパーを使うものほか、色々出てくるのですが、<select>単体だと:after擬似要素が使えなかったりと、難敵でした。ただ、時代は進んでSVGネイティブサポート時代。画像ファイルでなしに、SVGを埋め込めばいいじゃないか。

SVGで三角を描く

SVGでシンプルなキャレットを描くとこんな感じ。かなり短いコードで書けます。JSFiddleで試す

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="5">
  <path d="M0,0 10,0 5,5z" fill="black" />
</svg>

CSSに埋め込む

これをCSSの中で表記すれば、<select>要素のアピアランスをシンプルにコントロールできそう。というか、できた → JSFiddleで試す

select {
  /* removes default appearance of select */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding: .5em 22px .5em .5em;
  border-radius: 0;
  background-position: right;
  background-repeat: no-repeat;

  /* adds triangle image as a background  */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="5"><path d="M0,0 10,0 5,5z" fill="black" /></svg>');
}

select[disabled] {
  /* same image but gray */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="5"><path d="M0,0 10,0 5,5z" fill="gray" /></svg>');
}

以上。