<input>要素の"color"型

フォーム関連

2019.09.13

<input>要素の”color”型

フォーム内に色を指定するための入力欄を設ける際に使用されます。
CSSでの色の指定は、色名、RGB値、関数表記、アルファ値付きなどがありますが、color型を使って指定できるのは、RGB値を表すテキストになります。
color型はブラウザによって見た目が大きく変わる要素の一つです。

Internet Explolerは、color型には対応していません。

<input> 要素の color型では、以下の属性が使用できます。

RGB値を表すテキストで、入力欄の初期値を設定します。

指定できるRGB値の形式は、以下の半角英数7文字となります。
#RRGGBB
それぞれ、”00″〜”FF”の16進数2桁の数値で表します。

その入力欄が関連付けられた、定義済みデータを提供する、<datalist> 要素の id を指定します。

自動補完機能を提供するかどうかを記述します。（”on”または”off”）

autocomplete属性に指定できる値は本来もっとありますが、”name”や”country”といったテキストの内容を表すような値ばかりなので、color型の場合は、実質上”on”か”off”で自動補完を使うかどうかだけの選択になります。

See the Pen OJLEBjZ by Masahiko Iwakiri (@m-iwakiri) on CodePen.

このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。

HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?： https://caniuse.com/#home