May 12, 2010, 3:08 PM — 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.
