htmlcolor-pickerpreset

How to add predefined colors to <input type="color">?

According to MDN, the list attribute can be used for <input> elements of type color to provide a list of predefined colors. That page also indicates that list is supported at least in Chrome.

Though when I specified some colors they were not shown as expected using Chrome 67. Instead, only empty items were shown in the color picker popup and clicking on them set the value of the input to rgba(0, 0, 0, 0).

Predefined colors for <input type="color"> not shown in Chrome

Simple example:

<input type="color" list="presetColors">
<datalist id="presetColors">
  <option value="#ff0000"/>
  <option value="#00ff00"/>
  <option value="#0000ff"/>
</datalist>

I tried to specify the colors in different formats like used in CSS, e.g. rgb() or color keywords like red, though none of them worked.

Having a look at the HTML specification, it says that the input only accepts "lowercase simple colors", which is defined as the 6-character hex format.

So, is that a bug in Chrome or am I supposed to specify the colors in a different format?

Solution

  • Use this format for list:

     <input type="color" list="presetColors">
  <datalist id="presetColors">
    <option>#ff0000</option>
    <option>#00ff00</option>
    <option>#0000ff</option>
  </datalist>

    Demo: http://jsfiddle.net/lotusgodkk/GCu2D/4045/

    Note: As mentioned, this works only in chrome now.