2015/09/07デザイン性からフォームの「select」を装飾することがしばしばありますが、CSSのみでの装飾には限界があります。それがIE7やIE8など、古いブラウザに対応させるとなるとなおさらの事です。装飾にJSを利用するのはあまり好きではありませんが、最終手段として重宝しているのがjQueryのプラグイン「customSelect」です。jQuery.customSelect()しくみとしては、スクリプトで既存のselect句の上に空のレイヤーを重ねて、それを装飾できるようにしています。そのレイヤーを選択した場合にselectのような挙動をさせて、既存のselect句のvalueと同期するように制御してくれます。導入方法については公式サイトにもありますが、いたって簡単です。jQueryと公式サイトからダウンロードした「customSelect」を読み込みます。src="jquery.customSelect.min.js"></script>次に装飾するselectフォームを用意し、任意のクラス名、例えば「custom」を指定します。value="dummy3">ダミー3</option></select>そしてJSでプラグインを実行します。$('select.custom').customSelect();そうすると、いわゆるプレーンな状態のselectボックスが表示されます。枠線、マージン、ボタンなどがない、まっさらな状態ですね。ここから、以下のセレクタで自由に装飾することができます。{}基本的にはデフォルトの状態「customSelect」、選択肢の見栄え「customSelectInner」を指定してあげれば、きれいに装飾できるでしょう。クラス名を分ければ、同一ページ内の複数のselect句を、異なったデザインの装飾することもできます。複雑なデザインの場合、また、癖のあるIE7、IE8などを対応しなければならない場合に重宝しています。本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScriptを利用するWebプログラマ必携の逆引き集」です。JavaScript(ECMAScript)の基本構文や新記法といった基礎的な知識から、オブジェクト指向、組み込みオブジェクト、関数、オブジェクト指向構文、DOM、ブラウザーオブジェクトなどの定石・応用テクニック、開発に役立つツール類まで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。JavaScriptをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScriptをもっと活用したい方などにおすすめの一冊です。アスキー・メディアワークスWeb制作に必要なjQueryの使い方を効率よくしっかり学べる。2.0など最新のトレンドにも対応。サンプルを100本超提供。1.9対応特製チートシート付き。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。