フォームカスタマイズ – <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タグの設置がハッピーになりますね。

この記事は「jQuery」カテゴリーです。

カンマン最新情報をゲット!

Facebookのウォールで

Twitterのタイムラインで

この記事を書いた人

白い たつ也
白い たつ也 Web Hengineer 「腹は黒いが名は白い」 気がついたら徳島にいました。 好き嫌いの激しい87年生まれ。 白い たつ也が書いた他の記事をチェック!

もう1記事どうぞ!

  • 関連
  • 人気
  • 最新

コメントを残す