チラシの裏的備忘録: Selectタグの見た目を変える

2013年7月9日火曜日

なんか面白いものを見つけたので

<select>の見た目を変える

コイツの見た目を変えたい！というお話.
使うプロパティは

appearance

こいつを使う.
とりあえずボタンにしてみる

select{

    /* 見た目をinputのtype=buttonに */
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;

}

この設定をしてやると…

となる. あとはボタンと同じようにデコレーションしてやればいい.
ただPCで見ると, たまに選択肢の描画がなんかおかしい. スマホならそれぞれのダイアログが開くので気にはならないかと.

ちなみに

select{

    /* 見た目をcheckboxに */
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    appearance: checkbox;

}

とかしてみると…

これはひどい…('A`)