フォームカスタマイズ – <select>のデザインカスタマイズをするならcustomselect.jsが便利

地味に面倒くさいフォームのカスタマイズですが、 <select></select>のカスタマイズには【customselect.js】が便利です。 使い方は簡単です まずはヘッダで読み込んで

<script src='js/customSelect.jquery.js'></script>

$(document).ready(function(){
    $('.mySelectBoxClass').customSelect();
    //独自のクラスを付けたければどうぞ
    $('.mySelectBoxClass').customSelect({customClass:'myOwnClassName'});
});

これだけでクラスを振ってくれるので、あとは cssを調整するだけです。 とりあえずは【通常】と【マウスオーバー時のselectタグ】だけ書いておけばいいと思ってます。

/*【通常】*/
.customSelect {
}

/*【マウスオーバー時のselectタグ】*/
.customSelect.customSelectHover{
}

/*【選択肢(option)オープン時のselectタグ】*/
.customSelect.customSelectOpen {
}

/*【フォーカスが当たっているときのselectタグ】*/
.customSelect.customSelectFocus{
}

/*【selectタグが無効なとき】*/
.customSelect.customSelectDisabled{
}

/*【無効なoptionタグ】*/
.customSelect.customSelectDisabledOption {
}

と言った感じでcssを追加するだけで簡単に設置できます。 もしアイコンで▼マークとか入れたければbackgroundに指定すればできるはずですよ。 さらに内側にクラスでcustomSelectInnerもいますので、それも使えば結構自由にできるはずです。 これでselectタグの設置がハッピーになりますね。