この翻訳は不完全です。英語から この記事を翻訳 してください。

<input> 要素の "color" は視覚的なインターフェイス、もしくは"#rrggbb" の16進数表記でテキストを入力することでユーザーが色を指定することができます。色は単純な(アルファ値のない)もののみとなります。

この要素が表示する内容は、文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザやプラットフォームにより大きく異なることがあります。

<input type="color">

Value 7文字の小文字16進数(<color>)で表記されたDOMString
イベント changeおよび input
共通属性 autocompletelist
IDL属性 list と value
メソッド select()

<input> 要素の"color" タイプにおけるvalueは常に7文字の16進数表記からなるRGBカラーのDOMStringとなります。大文字を指定した場合、小文字に変換されます。これ以外や空の値になることはありません。

Note: 有効でないRGBカラーは "#000000" に置き換わります。特にCSS標準色やCSS表記による値は指定できません。これはHTMLとCSSの仕様に違いがあることが理由です。アルファ値はサポートされていません。#009900aa などの値は"#000000" に置き換わります。

カラー入力を使う

"color" 型はサポートされる属性が限られているため単純です。

標準色

標準値を設定すると、その色で表示され、カラーピッカーがある場合はあらかじめその色が指定されます。

<input type="color" value="#ff0000">

色を指定しない場合は黒("#000000")になります。値は "#rrggbb" のように、赤、緑、青を示す2桁の数字が並ぶ7文字の16進数表記でなければいけません。CSS色名や rgb() や rgba() といった関数表記は、設定する前にこの方式に変換しておく必要があります。

色の変更を知る

ほかの<input>型と同じようにinputchangeイベントで色の変化を検出することができます。input は <input> 要素で色が変更されるたびに実行されます。change イベントはユーザーがカラーピッカーを閉じたときに実行されます。どちらの場合も、新しい値はvalueで調べることができます。

これは色の値を監視する例です:

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

値の選択

対象のブラウザが <input> 要素の "color" 型をサポートしておらず、代わりにテキスト入力欄に値を直接入力した場合、select()メソッドで入力欄のテキストを選択することになります。ブラウザがカラーピッカーなどを提供している場合、 select() は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。

colorWell.select();

外観のバリエーション

先述の通り、ブラウザがカラーピッカーをサポートしていない場合、値の検証を行うテキストボックスとなります。例えばSafari 10.1ではこのような見た目になります。

Screenshot of the example taken in Safari.

おなじ内容でもFirefox 55ではこのようになります。

Screenshot of the example taken in Firefox 55 for macOS

このとき、対象をクリックすることでプラットフォームのカラーピッカーが表示されます(画像はmacOSのカラーピッカー)。

Screenshot of the element with the color picker open in Firefox Mac.

検証

user agentが値を正しい形式に変換できない場合、値は無効であると見なされます。このときは:invalid 疑似クラスが要素に適用されます。

changeinputイベントにより新しい色を取得し、その結果をドキュメントの<p>要素に適用します。

HTML

HTMLはとても単純です。  "colorWell" IDを持つ<input>の "color" 型は段落の色を変更するために用います。

<p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code>
   control.</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell">

<p>Watch the paragraph colors change when you adjust the color picker.
   As you make changes in the color picker, the first paragraph's
   color changes, as a preview (this uses the <code>input</code>
   event). When you close the color picker, the <code>change</code>
   event fires, and we detect that to change every paragraph to
   the selected color.</p>

JavaScript

まずはいくつかの設定を行います。起動時の標準色と、対象の要素を格納する変数を用意し、ページが完全に読み込まれたときに実行されるloadイベントにより開始させます。

var colorWell;
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

初期化

ページが読み込まれ、load イベントが呼び出されると、startup()が呼ばれます。

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

colorWell に取得された <input> 要素を格納し、valueプロパティに defaultColor を代入します。次に、inputイベントにupdateFirst() 関数を、changeイベントにupdateAll(). 関数を指定します。これらについては後述します。

最後にselect()を呼び出し、テキストを選択します。これはカラーピッカーが提供されていないなどで、テキスト入力欄として表示された場合に利用します。

色の変更に対処する

updateFirst() 関数はinput イベントによって呼び出され、ドキュメントの最初にある段落要素の色を変えて、入力欄の新しい値と一致させます。このイベントは値を調整する(明るさを変更するなど)たびに実行されるため、カラーピッカーが使用される毎に実行されます。

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

カラーピッカーが閉じられると、 change イベントが要素に送信されます。updateAll() 関数によってこれを捕捉し、Event.target.valueによって最終的に選択された色を取得します。

function updateAll(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

event.targetによって取得したcolor色を、すべての<p>ブロックに適用します。

結果

最終的な結果は以下のようになります:

定義

Specification Status Comment
HTML Living Standard 現行の標準  
HTML5 勧告  
HTML 4.01 Specification 勧告 初回定義

ブラウザ互換性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 20.0 38 29 (29) [1] 未サポート 11.01 10
list 20.0 ? 未サポート[2] 未サポート ? ?
autocomplete 20.0 ? 未サポート[3] 未サポート ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4 27.0 (27.0) 未サポート (有) ?
list ? 未サポート[2] 未サポート ? ?
autocomplete ? 未サポート[3] 未サポート ? ?

[1] 現時点でFirefoxはWindows Touchでの"color" 型をサポートしていません。

[2] FireFoxにおける list 属性についてはバグ 960984を参照してください。

[3] FireFoxにおける autocomplete 属性についてはバグ 960989を参照してください。この属性の値を取得することはできますが、何も起きません。

ドキュメントのタグと貢献者

 このページの貢献者: TNKSoftware
 最終更新者: TNKSoftware,