Correct HTML for select coloring

Need cross-browser color in your Web "pick-lists"? Here's what it takes.

By  

We recently came across a fragment of HTML we needed that we could find documented nowhere -- so "Smart Development" explains it here.

Our Web applications manage scores of basic HTML forms. Many of them employ "pick-lists", or drop-down selection boxes of various sorts. For many of these, color provides value; for example, a management panel for virtual instances shows different background colors based on the geographic location of the base host: light blue, Vancouver, light yellow, Omaha, and so on. We've found that color makes certain data far easier to grasp at a glance.

As simple as that sounds, quite a few references document it incorrectly, and none (!) completely describe what it takes to have a selection show as its background color the background color of the current selection.

The situation and its solution have several parts. The option-s themselves take bgcolor, so it's easy enough to color the background of individual selections. In nearly all browsers, though, the background color of the "closed" selection is different, and must be assigned separately.

The drop-downs above illustrate much of this: the middle one, for instance, has "green" selected, and shows green (in most browsers) as its background color whether the drop-down is open or closed. This is conveniently done with the background-color style.

To have the color behave as we want after a user makes a selection requires an additional line of JavaScript; it can't be done declaratively, even with CSS3, to the best of our knowledge. JavaScript's access to the backgroundColor property, though, gives the following drop-down ...

... the ability to update the selection color in response to end-user clicks.

Central to this implementation is the assignment,

onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"

You can examine the rest of the pertinent source simply by viewing the source of this page. Note that different browsers handle "focus" with subtle differences. Note, also, that the drop-downs above are correct only with respect to specific requirements. We use different color behaviors for other drop-downs, in other contexts.

Has anyone else documented this more completely? This dialogue comes close, but provides slightly non-conformant capitalization for the style property. It's frustrating to have to take such pains in definition of what looks like a simple widget, especially when JavaScript is capable of so much more (two examples: musical notation; and a reactive, event-oriented, programming language). These details are essential, though, to provide an error-free experience for end users.

Coming up

Smart Development's next tip will touch on use of SVG as a "scratchpad" for visual design.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Spotlight on ...
Online Training

    Upgrade your skills and earn higher pay

    Readers to share their best tips for maximizing training dollars and getting the most out self-directed learning. Here’s what they said.

     

    Learn more

Answers - Powered by ITworld

Ask a Question
randomness