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

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K 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: 2 minutes, 30 seconds

Currently supported in all modern browsers with the exception of Safari and Internet Explorer, the potential of the color HTML5 input is great, allowing the user to make any color selection in a form:

Uses

Color is a great way to allow the personalization of webpages: for example, prompting 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.

Like the <progress> input, the default appearence of the color dialog is strongly dependant on the browser and its underlying operating system.

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 looks like:

<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.

Responding To Color Changes

Using the selected color is very simple. Taking the code from the example above:

<label for="bgcolor">Select the (temporary) background color for this page:</label>
<input type="color" value="#ff0000" id="bgcolor" name="bgcolor" oninput="changeBackground(bgcolor.value)">

We can apply the following piece of JavaScript:

function changeBackground(colorValue){
document.body.style.backgroundColor = colorValue;
}

Note that current browser behaviour has similar issues to the range input: Chrome will change the background color of the page in response to a onchange event, but Firefox will not alter the background until after after the color picker is closed. To make browser behaviour the same, I have chosen to fire the function oninput.

If you wanted to make the background color semi-permanent, you could write the new color value into a cookie or LocalStorage.

Restricting Color Well Selection

By default the “well” that appears offers the user the entire color gamut to choose from. With the same principle as the range input, the user’s choices can be directed to just a few colors by using a <datalist> with appropriate <option> values:

<input type="color" value="#333333" list="colors">
<datalist id=colors>
<option>#ffffff</option>
<option>#ff0000</option>
<option>#ff7700</option>
</datalist>

If you’re using Chrome, you can see the result below:

Limited color well selection example

As this behaviour is part of the spec, I expect other browsers to follow in supporting it presently.

Writing compatibility for other browsers

Gaining support in Safari and IE takes one of two approaches: either validating the value with the Constraint API:

<input type="text" value="#ffffff" id="bgcolor" pattern="^#([A-Fa-f0-9]{6})$" required title="Hexadecimal value required">

… or wiring in a JavaScript polyfill to create an equivalent behaviour: 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.