第12回 jQueryでセレクトボックスをデザインする | gihyo.jp
デザインされたセレクトボックスを実装する セレクトボックスはCSSでほとんどスタイルを当てることができないので、フォームをデザインするときに苦労する方が多いのではないでしょうか。今回は、HTMLとCSS、そしてjQueryを利用して疑似セレクトボックスを作成してみましょう。 作成方法はとても簡単なので、覚えておけば色々なシーンで流用できるでしょう。 まずは、完成サンプルを見て作成するセレクトボックスのイメージを掴んでください。 疑似セレクトボックス そもそもデフォルトのセレクトボックスの挙動は クリックするとプルダウンが表示 プルダウンの項目をクリックする セレクトボックスの中身が選択した項目に置き換わる というようになっているのでこれを実装していきます。 セレクトボックスはselect要素とそれに内包されるoption要素（プルダウン部分）で構成されるので、それらを代替要素で構成し、プル
セレクトメニューを自由にデザインできる customSelect.js
「customSelect.js」は、CSSだけでは変更できない、フォームのセレクトメニューのデザインを簡単にカスタマイズできるプラグインです。 標準スタイルはシンプルですが、自分で用意したデザインも適用できます。軽量で拡張しやすいので、セレクトメニューのデザインをカスタマイズするにはベストなプラグインです。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、customSelect.js を配布ページからダウンロードしましょう。customSelect.js は GitHub で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と customSelect.js を、利用するWebページの head の閉じタグ直前に読み込みます。このプラグインはページの読み込みが完了する前に読み込む必要があ
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
