While designing a form for my client, I came across the need to render clickable text beside checkboxes for better usability. I had a difficult time finding an article that did not use Javascript in anyways.
Then in my search, I came across the most obvious answer that lying right under my nose the whole time.
The Label Tag, and the ‘for’ attribute.
Most designers will start with the following:
<fieldset> <legend>Your dog's favorite foods:</legend> <input type="checkbox" value="kibble" /> <label>Kibble</label> <input type="checkbox" value="chow" /> <label>Chow</label> <input type="checkbox" value="steak" /> <label>Steak</label> </fieldset>
Which renders:
As you can see, you can click the checkboxes, but the text only serves as well… a label, and is not useful as an interface.
Using the ‘for’ and ‘id’ attributes respectively, we can achieve ‘clickable’ checkbox text.
Now, we add the ‘id’ attributes to the inputs, and the ‘for’ attributes to the labels.
<fieldset> <legend>Your dog's favorite foods:</legend> <input type="checkbox" value="kibble" id="kibble" /> <label for="kibble">Kibble</label> <input type="checkbox" value="chow" id="chow" /> <label for="chow">Chow</label> <input type="checkbox" value="steak" id="steak" /> <label for="steak">Steak</label> </fieldset>
Which renders:
Great! Now we can click either the checkbox or the label, and they both check or uncheck the box! But.. we’re not done.
The problem with the current setup is that the cursor does not change at all, and does not alert the user that ‘You can click me!’
If we add some simple CSS, we can then create a enriched user interface.
First, lets give a class to this fieldset so we do not affect other inputs or labels.
<fieldset class="checkbox"> <legend>Your dog's favorite foods:</legend> <input type="checkbox" value="kibble" id="kibble" /> <label for="kibble">Kibble</label> <input type="checkbox" value="chow" id="chow" /> <label for="chow">Chow</label> <input type="checkbox" value="steak" id="steak" /> <label for="steak">Steak</label> </fieldset>
Now we can add some CSS.
.checkbox input { cursor:pointer; }
.checkbox label:hover { cursor:pointer; color:#ffffcc; }
What this declaration is doing is; When we hover or any inputs or labels within the fieldset with the class of ‘checkbox’, it changes the cursor to a pointer, and creates a roll-over color for the label.
*NOTE* Since you are using the :hover pseudo class, you can not use ‘inline-css’ to style these elements.
Which renders:
Success! We now have a clean, usable, and attractive interface. Plus, we’ve created valid xHTML and CSS without having to use any Javascript or other methods.
