jQuery で色選択。input type=”color” を使ってみる

HTML5 でinput タグの typecolorを指定できるようになりました。

色選択のダイアログ(カラーパレット)を簡単に表示できるので、jQuery で使ってみます。

デモ

色を選択するとラベルの色が変わります。




選択値 :



選択値 :

ソース

使い方

HTML 側

type=”color” と指定します。

list 属性を指定すると、選択候補をしぼって提示できます。

jQuery 側

色選択時の処理は on メソッドの change に記述します。

選択した色の値は val メソッドで取得します。

たとえば、黒を選択すると #000000 が返ってきます。

コメントはお気軽に