Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
35 lines (21 sloc) 1.38 KB


A jQuery plugin to help implement the over label technique described in Making Compact Forms More Accessible by Mike Brittain on ALA.

No settings, nothing fancy, just select one or more label elements that have a for attribute pointing to the correct input and done. Oh and add a little CSS. The plugin adds a class of "overlabel" to each label element.

When the user puts focus on the input, the label will be hidden. When the input is blurred and has no value, the label will be shown again. Just need to write the CSS based on your DOM structure to position the label over the element correctly.

Here is an example of what the CSS might look like (taken from the ALA article):

label.overlabel {

In order for the above CSS to work, you'll need a parent element with position (other than static position).

Here is an example of the JS.

// select labels for text inputs, assuming the label is directly before the input
$('form input[type=text]').prev('label').overlabel();

You can also call this on the inputs directly.

$('form input:text').overlabel();


The overlabel plugin is licensed under the MIT License (LICENSE.txt).

Copyright (c) 2013 Brandon Aaron

Jump to Line
Something went wrong with that request. Please try again.