HTML - <input type="color">
The <input type="color"> element is a specific version of the <input> element, used to create an input field which allow user to select color and enter color code. A color picker's UI has no required features other than accepting simple colors as text (more info).
Example
To create widget for selecting color, use:
<input type="color" />
The above example will create color picker element with default black color selected.
<input type="color" value="#ff0000" />
The above example will create color picker element with red color selected.
Here is an image of the color control displayed on Mac inside the Chrome browser:
Description
The <input type="color"> element is a specific version of the <input> element, used to create an input field which allow user to select color and enter color code. A color picker's UI has no required features other than accepting simple colors as text (more info).
The browser will generate a input field for selecting, and changing the colors. The data which the user enters will be represented as color.
| Content categories | Flow content, listed, submittable, resettable, form-associated element, phrasing content, labellable element, palpable content. |
|---|---|
| Permitted content | None, it is an empty element. |
| Tag omission | Must have a start tag and must not have an end tag. |
| Permitted parent elements | Any element that accepts phrasing content. |
| DOM interface | HTMLInputElement |
Browser Compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | 12 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
| type="color" | 20.0 | 38 | 29.0 (29.0) ¹ | No support | 11.01 | 10 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
| type=color | 4.4 | 27.0 (27.0) | ? | (Yes) | ? |
¹ This is not implemented for Windows Touch yet.
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard | Living Standard | |
| HTML5 | Recommendation | |
| HTML 4.01 Specification | Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/input/color