<input type="color">
<input> 要素の color は、視覚的なカラーピッカーインターフェイスを使用したり、CSS 色値の決められた形式でテキストフィールドに色を入力したりして、ユーザーが色を指定できるユーザーインターフェイス要素を提供します。
この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。基本的なテキストの入力フィールドで、入力された色情報が文字列の検証のみを行う入力フィールドであったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 20 | 14 | 29 | 12.1 | 25 | 12.2 | |
基本構文
HTML
<label>Theme Color:
<input type="color" value="#3498db">
</label>ライブデモ
実務での使いどころ
-
<input type="color"> の活用
<input> 要素の color は、視覚的なカラーピッカーインターフェイスを使用したり、CSS 色値の決められた形式でテキストフィールドに色を入力したりして、ユーザーが色を指定できるユーザーインターフェイス要素を提供します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。