`alpha` and `colorspace` attributes for `<input type=color>`
<input> 要素の color は、視覚的なカラーピッカーインターフェイスを使用したり、CSS 色値の決められた形式でテキストフィールドに色を入力したりして、ユーザーが色を指定できるユーザーインターフェイス要素を提供します。
この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。基本的なテキストの入力フィールドで、入力された色情報が文字列の検証のみを行う入力フィールドであったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
alpha 実験的 | | | | 18.4 | | 18.4 |
| HTML 属性 | ||||||
alpha 実験的 | | | Preview | 18.4 | | 18.4 |
colorspace 実験的 input 要素の color は視覚的なインターフェイス、もしくは #rrggbb の 16 進数表記でテキストを入力することでユーザーが色を指定することができるユーザーインターフェイス要素を提供します。 | | | Preview | 18.4 | | 18.4 |
| DOM API | ||||||
| colorSpace は HTMLInputElement インターフェイスのプロパティで、input 要素の colorspace 属性を反映し、シリアライズされた CSS 色のcolor spaceが sRGB （デフォルト）か display-p3 かを示します。これは color コントロールでのみ関連します。 | | | 149 | 18.4 | | 18.4 |
基本構文
<label>Color (with transparency):
<input type="color" value="#3498dbcc">
</label>ライブデモ
Alpha-enabled picker
Use the alpha attribute when the browser supports transparency in color inputs.
Support checklist
What alpha and colorspace add to a color input, and how it behaves where they are unsupported.
実務での使いどころ
-
`alpha` and `colorspace` attributes for `<input type=color>` の活用
<input> 要素の color は、視覚的なカラーピッカーインターフェイスを使用したり、CSS 色値の決められた形式でテキストフィールドに色を入力したりして、ユーザーが色を指定できるユーザーインターフェイス要素を提供します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。