Categoryフォーム

select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」

「jQuery.customSelect()」は、セレクトボックスのCSSをカスタマイズしてデザインを変更できるようにするjQueryプラグインです。

select要素、つまりセレクトボックスやプルダウン時の見た目を変更したいと思ったら、結構大変です。

CSSでスタイルを変更しようと思っても、思ったようにいかなかったり、IE/Chrome/FireFox/Safariなどのブラウザごとに見た目が微妙に(いやかなり・・・)違ってしまったり。

そんなときは、jQuaryプラグイン「jQuery.customSelect()」を利用するとselect要素を見栄えよくカスタマイズすることができます。

サンプルをつくってみました。

select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」サンプル

プラグインのサイズも1kb未満と軽量なので、サイトも重くならずにすみます。ちなみにIE6以下の古いブラウザには対応していないと記してあります。

→「select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」」の続きを読む

セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」

Chosen

フォームなどでよく使われるセレクトボックスですが、デフォルトのままで使うことが多いと思います。

そのセレクトボックスをもっと使いやすくカスタマイズしてくれるjQueryプラグインがこの「Chosen」です。

セレクトボックスをプルダウンすると検索窓が表示され、そこからインスタンス検索が可能になります。選択する項目が増えるほど効力を発揮できそうですね。

動作は次のサンプルを見ていただいた方がわかりやすいと思います。

セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」のサンプル

見た目もスタイリッシュになり、検索窓からリアルタイムに絞り込みできるのが嬉しいですね。

→「セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」」の続きを読む

フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」

Rome

お問い合わせや申込フォームなどで、日付を入力してもらうことも多いと思います。そんなときに、カレンダーで日付をピックしてもらうようにすると大変便利ですよね。

そんなときに便利なのが、このカレンダーライブラリー「Rome」です。

サンプルを作ってみました。

フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」サンプル

日付だけでなく、時間との組み合わせ、または時間のみの入力も可能です。構成は2ファイルのみで、jQueryがなくても動きます。

使用方法は続きをどうぞ。

→「フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」」の続きを読む

iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」

Jquery Magical Contact Form

iPhoneの画像を利用したとても個性的なアニメーションコンタクトフォームを紹介します。

「Magical Contact Form」と名付けられたユニークな効果のあるフォームです。なぜかiPhoneにカードが収められて飛んでいきます。テキストを入力しているときのアニメーションもユニークです。

画像を変更するだけでも容易にカスタマイズできますので、初心者のかたでもデザイン変更が簡単にできます。

サンプルを作ってみました。サンプルといっても画像を変更しただけです。

→ iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」

※実際に送信はされません。

過去の記事で、色々なモバイル端末のPSDファイルを紹介しています。利用すれば面白いフォームが出来ると思います。
iPhone、iPadやMacなどのディスプレイを集めたPhotoshop(フォトショップ)端末ディスプレイPSD無料素材集

もちろん敢えてiPhoneなどの画像にこだわらなくても、自分で封筒の画像を用意するなど発想次第でユニークなデザインが実現出来ると思います。

→「iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」」の続きを読む