WEB作成メモBLOG

select menuをcssとjavascriptでデザインする方法

HTML・CSS, WEB制作の小技や機能 | 2010.12.10

フォームタグのパーツはあまり細かくデザインしない事が通常ですが、
少々遊び心を取り入れたい場合には、こちらのJavaScriptとcssを使うと、かなり自由にデザインできるようになるようです。
セレクトボックスをカスタマイズするjavascript【Select Box】

また、試してないのですが、こちらも良さそうです。
selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js)

セレクトメニュー部分のデザインとしては、こちらのブログが参考になります。
フォームをデザインしよう
意外とバリエーションがあるものですね。
見ているだけでも楽しくなります。

でも、実際のサイトで使われているのはあまりお目にかかった事がないような気も・・・。

今回も、とあるサイトに導入しようとしてこちらの様な参考サイトにたどり着いたのですが、
結局IEでうまく表示されないことと、ユーザビリティを考えると
一般的な見た目の方がよいかな・・・という結論に至りまして、見送ることとなってしまいました。

うーん、ちょっと残念。必要があればいつか導入してみたいものです。

【PR】使わなくなったパソコンはありませんか?パソコン無料回収

関連する記事

カラーミーショップはリアルな店舗を持っていなくても、ネットを通じて商品を販売する楽しみを多くの人に実感してもらえるショッピングカートです。これまでに23万を超えるユーザー様からお申込みをいただいております。
カラーミーショップなら誰かに(大手に)頼らなくても、あなた好みのネットショップを作れます。あなたがセレクトした商品や作った商品の魅力を伝え、それを欲しいと思ってくれる人にお届けしてみませんか。
30日間、無料でお試しいただけるので、初心者の方やネットショップ作成サービスで悩んでいる方も、安心してご利用いただけます。
ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額100円(税抜)~ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。

▼ロリポップ!レンタルサーバーはこちら
▼インストール不要の画像作成ツール▼
画像作成ツールボタンメーカープロ

カテゴリー

アーカイブ


リンク

アフラット
ページのトップへ戻る