Clickable Form Labels IE Behavior

Form Label Usability Enhancement

Give a class of clickable to any label that surrounds form elements — then add this declaration to the style rules for the clickable class:

label.clickable { behavior: expression(this.onclick=function() {this.children[0].click()}) }
label[class="clickable"] { behavior: none; }

The usability enhancement is now contained entirely in your .css file. No referenced script necessary. This approach is cross-browser in the sense that Mozilla/Firefox/Opera behavior is not affected. IE7 chokes on the click() method so the behavior is removed for that browser. The labels remain clickable however.

« Examples page