「jQuery.customSelect()」は、セレクトボックスのCSSをカスタマイズしてデザインを変更できるようにするjQueryプラグインです。
select要素、つまりセレクトボックスやプルダウン時の見た目を変更したいと思ったら、結構大変です。
CSSでスタイルを変更しようと思っても、思ったようにいかなかったり、IE/Chrome/FireFox/Safariなどのブラウザごとに見た目が微妙に（いやかなり・・・）違ってしまったり。
そんなときは、jQuaryプラグイン「jQuery.customSelect()」を利用するとselect要素を見栄えよくカスタマイズすることができます。
サンプルをつくってみました。
select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」サンプル
プラグインのサイズも1kb未満と軽量なので、サイトも重くならずにすみます。ちなみにIE6以下の古いブラウザには対応していないと記してあります。
使用方法
jQuery.customSelect()のサイトから、GitHubへ行き、デモを含むファイルを一式ダウンロードすることができます。
＜head＞部分に以下を記述して、jQuery本体とプラグインを読み込ませます。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.customSelect.js"></script> <script type="text/javascript"> $(function(){ $('.クラス名').customSelect(); }); </script> |
＜body＞部の任意の場所にセレクト文を記述します。
|
1 2 3 4 5 6 7 |
<select class="クラス名"> <option value="">選択してください...</option> <option value="one">りんご</option> <option value="two">バナナ</option> <option value="three">スターフルーツ</option> <option value="four">マンゴー</option> </select> |
以上で、次のCSSで主なスタイルを変更することができるようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.customSelect { /* デフォルトのスタイル */ /* Put whatever custom styles you want here */ } .customSelect.customSelectHover { /* マウスオーバー時のスタイル */ } .customSelect.customSelectOpen { /* スプルダウン時のスタイル */ } .customSelect.customSelectFocus { /* フォーカス時のスタイル */ } .customSelectInner { /* セレクトボックス内部のスタイル */ } |
最後にサンプルのソースを書いておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」サンプル</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.customSelect.js"></script> <script type="text/javascript"> $(function(){ $('.styled').customSelect(); }); </script> <style type="text/css"> span.customSelect { font:12px sans-serif; background:#fff url(http://i48.tinypic.com/2u7rpec.png) right center no-repeat; border:1px solid #ddd; color:#555; padding:7px 9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px 2px; width:175px; } .customSelect.customSelectHover { border-color:#c7c7c7; background-color:#f5f5f5; } .customSelect.customSelectFocus { border-color:Orange; } .customSelect.customSelectOpen { border-color:OliveDrab; } .customSelect.customSelectChanged { -webkit-animation: changed 0.5s; -moz-animation: changed 0.5s; -ms-animation: changed 0.5s; animation: changed 0.5s; } @-webkit-keyframes changed { 0%, 100%{ -webkit-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0); box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0); } 50%{ -webkit-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5); box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5); } } @-moz-keyframes changed { 0%, 100%{ -moz-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0); box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0); } 50%{ -moz-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5); box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5); } } @keyframes changed { 0%, 100%{ box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0); } 50% { box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0.5); } } @-ms-keyframes changed { 0%, 100%{ -ms-box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0); box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0); } 50% { -ms-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0); box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5); } } </style> </head> <body style="margin:30px;"> <h1>select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」サンプル</h1> <p>セレクトボックスのスタイルを変更しています。</p> <h2>Demo:</h2> <select class="styled"> <option value="">選択してください...</option> <option value="one">りんご</option> <option value="two">バナナ</option> <option value="three">スターフルーツ</option> <option value="four">マンゴー</option> </select> </body> </html> |
あわせてお読みください
ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。 この…
Audio Player: Responsive and Touch-Friendly サイト上で音楽を流したいという場合に便利なjQueryオーディオプレーヤ…
「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエ…
コメントを残す