custom-select:セレクトボックスをカスタマイズするjs(IE6も対応)
- 2019.05.08
- JavaScript jQuery
- jquery.custom-select.js, select, セレクトボックス

セレクトボックスまでデザインにあわせて欲しいと要望があった際に使用しました。
デフォルトのセレクトボックスでイイじゃんって、何度も心の中で思ってました。
1.StyleとJavaScriptの記述
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.custom-select.js"></script> <link rel="stylesheet" href="select.css" type="text/css" media="all"> <style type="text/css"> <!-- body{ font-size: 12px; font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; color:#000000; margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:1.2em; text-align:center; padding:15px 0; } a{ font-size:16px; text-decoration:none; } p{ text-align:center; } #idWrap{ width:235px; margin:0 auto; text-align:center; } --> </style> <script type="text/javascript"> $(function() { $.customSelect(); }); </script>
2.jquery.custom-select.jsの調整
ファイル内4行目辺りの
$('select[name^=yyyy], select[name^=mm]').each(function() {
「yyyy」「mm」がセレクトボックスのname値になるので適当に設定します。
3.select.cssの調整
CSSファイル内13行目以降
/* Custom Select */ dl.custom-select { position:relative; width:78px; height: 31px; font-size: 12px; text-align: left; }
上記以降のサイズやpadding、背景画像等を調整します。
3.HTMLの記述
<select name="yyyy" id="yyyy"> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> </select> <select name="mm" id="mm"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>
ここまでカスタムする必要あるんですかねと思ってしまいますが、このこだわりがあるから、良いモノができるんでしょうね。
なるべく時間とコストが許す限り期待には応えたいです。
-
前の記事
パラパラアニメを表示させるjQuery 2019.05.07
-
次の記事
jquery.countdown.js:設定日からのカウントダウンを表示 2019.05.09