HTML and CSS Reference
In-Depth Information
Input Color Custom Component
In this section we will implement the HTML5 color input element as a composite component. The purpose of the
color input is to allow the user to select a simple color using the native color picker built into the browser. Table
7-2
outlines the attributes available for the color input element. Not all browsers support the color picker, and at the end
of the chapter we will implement a fallback in case the browser does not support this feature.
Table 7-2.
Attributes Supported by the Color Input Element
Attribute
Data type
autocomplete
Boolean
list
String (reference to a datalist)
value
String (sRGB color with 8-bit red, green, and blue components, e.g. #ff0000 for red)
There are two main ways of using the input element: either by allowing the user to select any color or by limiting
the number of colors to a list of predefined colors. Listing 7-1 shows an example of both. The result of example can be
seen in Figure
7-1
.
Listing 7-1.
Example of Using HTML5 Color Input
<section>
<label for="all-colors">All colors: </label>
<input id="all-colors" type="color" value="#00ff00" />
</section>
<section>
<label for="limit-colors">Limited colors: </label>
<input id="limit-colors" type="color" value="#00ff00" list="basic-colors" />
</section>
<datalist id="basic-colors">
<option value="#000000" label="Black" />
<option value="#ff0000" label="Red" />
<option value="#00ff00" label="Green" />
<option value="#0000ff" label="Blue" />
</datalist>
Figure 7-1.
HTML5 color input. All colors will display a color palette with all colors and limited colors will show a
palette of colors specified in the referenced datalist
