Select box hinting

Selectboxes aren’t my favorite part of the user-interface toolkit. Even before being subjected to a range of browser-specific styling, they’re awkward, clunky, and among the slowest inputs to use. But as they’re also a simple way to present a short lists of valid inputs, they’re likely to continue showing up for some time to come.

![]( "Label Open Selectbox UI Element")

Simple select boxes—“choose a color”—speak for themselves. More complicated ones, however, may need a little more explanation. One common strategy is to provide contextual help (“hinting”) to help clarify the inputs intentions. In HTML, that might look something like this:

<label for="foo">Pick one</label>
<select id="foo" name="foo">
  <option>option "A"</option>
  <option>option "A"</option>
  <option>option "A"</option>
<div class="hint">Option "A" is a good one.</div>```

Seems simple enough. One of the problems with select boxes, however, is their tendency to render in the least convenient place possible. Consider a form that follows the common pattern of providing hints beneath its elements:

![]( "Label Below Selectbox UI Element")

Now, remember that browser developers have designed select boxes to be as inconvenient as possible. 95% of the time, the select box in the example above will open its options *below* the actual element—completely covering the carefully provided hint.

To avoid this problem, many UI designers opt to place hint text *next to* the element in question:

![]( "Label Beside Selectbox UI Element")

It’s an elegant solution, but it greatly increases the form’s demands for horizontal real estate. For many interfaces, and particularly for those targeted at smaller screens, that space may simply not be available. In this case, one alternative might be to move the label *above* the control.

![]( "Label Above Selectbox UI Element")

The placement is unconventional, but a little bit of [CSS transition magic]( can help bring the hint to the user’s attention.

.hint { opacity:0; }

select:focus + .hint { opacity:1; position:relative; top: -40px; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; }```

The big assumption here is that there’s enough room available below the selectbox for the options to render there (this could be tested programatically before the styles are applied). There also needs to be enough room above. This seems reasonable enough; if there was room provided for a hint below the preceding element, the same space can be used to fit the hint attached to the <select> tag.

The short version? If a selectbox is too complicated to stand by itself, it may be time to look for another control. But if it really is the appropriate choice, it’s worth taking a few alternatives for how it might best serve its users.