Finishing Touches: Styled Keys

The seldom-seen kbd tag indicates text to be entered by the user. When styled appropriately, it can be handy for displaying things such as keyboard controls. See this site’s accessibility page for an example.

I’m currently using this CSS for a buttonish appearance:

kbd
{
	font-family:'andale mono','lucida console','courier new',monospace;
	font-size:1em;
	backgr\ound-color:#eeeeee;
	padd\ing-left:2px;
	padd\ing-right:2px;
	b\order:1px solid #dddddd;
	b\order-bottom-color:#999999;
	b\order-left-color:#999999;
}

The backslashes are there to hide some styling from older browsers such as IE 5.x; this technique is known as the Simplified Box Model Hack, and is one of the few CSS hacks a developer needs to know nowadays.

If you’re using the kbd tag for entire strings of command-line input (its primary intended use, judging from most examples) rather than just individual keys then the above styling probably isn’t quite appropriate; an additional class could be applied for single keys, or the effect applied to spans nested within kbd. It could also be argued that it’s not semantically correct to apply the tag to descriptions of keys rather than just literal text (e.g. Ctrl isn’t telling you to type C, t, r then l), but it’s hard to nitpick productively over such cases without authoritative examples.

Sat 1st Jan 2005, 8:41pm GMT

Filed under: Client-side Coding, Hints and Tips, Web

---

Comments

Comments are now closed for this entry.