Correct HTML for select coloring
Need cross-browser color in your Web "pick-lists"? Here's what it takes.
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
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,
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
Smart Development's next tip will touch on use of SVG as a "scratchpad" for visual design.