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

2015.5.15 メモ

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

comman社を背負った存在

地味に面倒くさいフォームのカスタマイズですが、
<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タグの設置がハッピーになりますね。