[ css ] セレクトボックスの装飾

セレクトボックスをcssで装飾する方法。

See the Pen
selectbox
by どら (@pochi__2828)
on CodePen.

HTML

<select>を囲む<div>を追加してクラス名を付与。

CSS

appearance:none;で元の矢印アイコンを非表示。
border-radius:0;にしておかないとSafariで角丸が残る。
IEでアイコンが残るのでselect::-ms-expand{display:none;}を追加。
新しい矢印アイコンはボーダーで作成。