no-image

JavaScript

セレクトボックスをシンプルに見やすくしてくれる「jQuery Styled Select Box」

jQuery Styled Select Boxは、セレクトボックスをシンプルにスタイリングして見やすい形にしてくれるjQueryプラグインです。デフォルトのセレクトボックスのデザインはどうも見づらいと感じている人は、こういったプラグインを活用するのも一つの手ですね。

jQuery Styled Select Box

デモ

デモでは「One」と表示されたセレクトボックスが設置されており、ここをクリックするとメニューリストが開かれます。リストにはOne、Two、Threeという項目が用意されています。

メニューリストが閉じられている時は、Oneの横の三角が下矢印になっていますが、メニューリストが開かれると上矢印になります。ちょっとした細部のアクセントにも気を配っているところがいいですね。

<select class="styled" name="numbers">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

jQuery Styled Select Box

no-imageサラッとスライスで切り替わるスライダー実装「Slice Slider」前のページ

シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」次のページno-image

関連記事

  1. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  2. CollagePlus

    JavaScript

    画像を綺麗に整列させるjQueryプラグイン「CollagePlus」

    画像を綺麗に整列させる便利なjQueryプラグイン「CollagePl…

  3. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  4. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  5. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  6. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP