demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The HTML5 Color Input

html / forms

Estimated reading time: 1 minute, 43 seconds

Screenshot of the HTML color input in operationWhile it is only supported in Opera and Chrome at this writing, the potential of the color HTML5 form input is very powerful: rendered correctly in the browser, it displays the operating system's color picker dialog window when selected, as shown in the screenshot to the right.

Uses

Once the element is supported in all browsers, it will be a great way to promote personalization of webpages: for example, allowing the user to choose the background and foreground colors of the site to suit their personal tastes, or for accessibility purposes, to make a website look better under conditions of color blindness.

Syntax

The code for the color input is an excellent demonstration of how elements gracefully degrade in older browsers. Typical code for the color input would look something like the following:

<label for="background" accesskey="c" >Select background color:</label>
<input type="color" name="background" id="background" value="#ff0000">

If you’ve written HTML forms before you’ll know that any input type that is not understood by a browser is interpreted as <input type="text" >. That is, <input type="generic"> will generate a simple text input. So if the browser does not understand <input type="color">, it will default to a text input, with #ff0000 as the default value in the example above.

As a result, the user (assuming they know hexadecimal color) will be able to enter their desired hue by hand, while browsers that do understand the input will render it completely, with the value of the input used as the default color in the picker.

Writing compatibility for other browsers

Gaining support in Firefox, Safari, IE and older browsers takes one of two approaches: either adding size and maxlength to the field, and validating the entered value server-side:

<label for="background" accesskey="c" >Select background color:</label>
<input type="color" name="background" id="background" value="#ff0000" maxlength="7" size="9" />

(Note that the addition of maxlength and size will make the input invalid (but still fully functional) in HTML5.)

Alternatively, you could wire in a JavaScript polyfill to create an equivalent result: examples include Spectrum and color polyfill.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.