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