To add some more style to your forms and give the user some feedback you you can use the :focus attribute. For example:
input:focus {
border: 1px #CC0000 solid;
}
This Mootool gives more style because it animates the on focus handle.
The html
The html is partly the exact html that I used on the previous article about forms: The right way to style a form.
The Mootool
The mootools javascript uses the morph transition. Read more about this at the Mootools docs.
window.addEvent('domready', function(){
var list = $$('form .inputbox');
list.each(function(e) {
var highlighter = new Fx.Tween(e);
e.addEvent('focus', function(){
highlighter.start(
'background-color', '#666'
'border', '#EEE'
);
});
e.addEvent('blur', function(){
highlighter.start(
'background-color', '#FFF',
'border', '#EEE'
);
});
});
});
