無料ブログ「rentafree.net」の管理人ブログ

色選択ツールのサンプル作ってみた

<input type="range">
を使った色選択ツールを試作してみました。

ブログエディターのタグ設定の色選択ツールをこんな感じに修正したいんだが、
<input type="range">
<input type="number">
を使ってるが、現状、Chrome、Opera、Safariは対応しているが、
新エディターはFirefoxしか対応していないので、
現状は実装できない。


サンプル
        
        
R
G
B
  #000000


サンプルは、
Chrome、Opera、Safari
で機能すると思います。

今の色選択ツールのスライダーは独自実装だが、
<input type="range">
で、ブラウザ標準機能でスライダーが表示できる。

あと、16色パレットつけてみた。
クリックで設定。

<input type="color">
も考えたが、
色以外の設定項目と並べる関係で、
やっぱり、色選択ツールはポップアップする感じのほうが良さそう。
イベント駆動でブラウザのカラーピッカーを起動できればいいんだが、そういうことはできないと思われる。