jQuery Form Focus Plugin
By: SethCardoza - Published: 2010-02-17 21:05:52 in Category: jQuery
This jQuery plugin will add a background color to text, password, and textarea input fields in forms when focused, and then revert to the original background color on blur. It is a one line call, with one (optional) parameter, the background color.
You can target all forms on the page with this simple line:
$('form').formFocus();
This will default the focused background color to: #f0f0c0
You can specify the background color as follows:
$('form').formFocus({backgroundcolor:'#ff0000});
which would make the focused background color a very bright red. You can also target forms specifically, whether you only want to use it on a single form, or if you want to specify different background colors for each.
$('#demo1').formFocus({backgroundcolor:'#ff0000});
$('#demo2').formFocus({backgroundcolor:'#0000ff});
Comments on This Post
Seth - February 18, 2010 - 7:43:22pm
@Gareth Price, sadly the CSS :focus pseudo-class isn't supported in IE6 or IE7. If you want a wider range of browser support, this plugin will do the trick. The CSS pseudo-class is a great way to progressively enhance the site.Gareth Price - February 18, 2010 - 1:55:22pm
Or you could just use CSS' :focus psuedo-class: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes