セレクトボックスを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;}を追加。
新しい矢印アイコンはボーダーで作成。