カラーピッカー備忘録

Bootstrapで使えるカラーピッカー

Bootstrapで使えるものがなかなか見つかりませんでした。以下、Bootstrapで使えるものを紹介しています。

jquery-minicolors

ieで使えます。最終的にこちらを採用となりました。 jquery-minicolors

使い方

説明ページ→example
サンプル

inuput-groupでのエラー対策(2018/5/20)追記

Bootstrapでinputとラベルやボタンを水平に綺麗に並べる場合は、以下のように設定します。すると、スウォッチの色がinputに反映されないバグがあります。(2018/05/20時点) 対策は、jqury.minicolors.cssの「.minicolors-theme-bootstrap .minicolors-swatch」のところのz-indexが2となっているところを としたら解決しました。たぶん3でもいけるかもしれません。

bootstrap-colorpicker

ie以外はこれでパーフェクトでしたが、ieで使えなかったため不採用となりました。
GitHub→ farbelous/bootstrap-colorpicker

使い方

説明ページ→example
サンプル