[JS]セレクトボックスをアクセシブルでスタイリッシュにするスクリプト -Stylish Select

簡単にフォームのセレクトボックスのデザインをスタイリッシュに変更するスクリプトを紹介します。

デモのキャプチャ

Stylish Select
デモページ

スクリプトはクロスブラウザ対応で、キーボード操作にも対応したアクセシブルなものとなっています。

バリエーションも豊富です。

デモのキャプチャ

optgroupのグループ化にも対応。

デモのキャプチャ

CSSを変更した、WindowsXPのスタイル。

デモのキャプチャ

高さの上限値を設定(max:300px)

設置方法は簡単で、スクリプトを外部ファイルとして記述し、下記のようにスクリプトにセレクトボックスを指定し、オプションなどを記述するだけです。

Stylish SelectはjQueryのプラグインのため、実装にはjquery.jsが必要です。

sponsors

top of page

©2018 coliss