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. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  2. Menu Droplet Animation
  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  4. jQuery_Overlay_Menu
  5. Accessible Mega Menu

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP