thoughts

CSS (and a little JS) Toolbar

2008-02-03 modified: 2008-02-10

Ideally, any HTML form can be easily styled like a toolbar, consider the following HTML snippet (trivial attributes omitted):

<form>
  <fieldset>
    <legend>checkboxes</legend>
    <p><input type="checkbox" id="cb1"><label for="cb1">checkbox1</label></p>
    <p><input type="checkbox" id="cb2"><label for="cb2">checkbox2</label></p>
    <p><input type="checkbox" id="cb3"><label for="cb3">checkbox3</label></p>
  </fieldset>
</form>

With some styling (some margin and padding tweaks omitted):

form {
	border: 1px outset silver;
	background-color: silver;
	overflow: auto;
}
form fieldset, form legend, form p, form label {
	float: left;
}
form fieldset {
	border: none;
	border-left: 2px groove silver;
}
form input {
	display: none;
}
form label {
	border: 1px outset silver;
	height: 24px;
}

This can look like:

Basically, I style the form as a toolbar holder, the fieldset as the toolbar and the legend as its legend. Then I hide input fields and style their labels as speedbuttons.

The problem with this is that the state of the controls is not reflected anywhere. Some CSS 2 and 3 come to the rescue:

input:checked + label {
	border-style: inset;
}

This is where things fail, since a lot of browsers do not support the :checked pseudoclass. Furthermore, you might want to style hover states as well. This is the list of problems I ran into:

• IE6 does not support the + (adjacent sibling) combinator
• IE6 does not support :hover pesudoclasses on labels
• IE (6 and 7) and Safari (win) do not support the :checked pseudoclass
• Safari has some troubles updating style when states are changed
• IE (6 and 7) and Opera do not pass events to the input element when clicking labels, when the inputs are hidden (display:none)
• IE6 does not support attribute selectors (we don't want to change text inputs)
• The legend element is a pain to style in all browsers

new com.rikkertkoppes.interfacing.Toolbar(htmlFormElement);