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

関連記事

  1. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  2. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  3. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  4. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP