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