Изменение стиля текстового поля при фокусе

Я часто пользуюсь браузером Google Chrome и мне нравится, как в нем реализовано взаимодействие пользователя с HTML-формами. Объясню более подробно, при фокусе в каком-либо поле, границы поля меняют цвет на более заметный. На мой взгляд, это очень удобно, при заполнении форм. Особенно когда человек сильно устал или плохо видит. Для реализации подобного эффекта мы будем использовать jQuery.

Для начала создадим простую форму, с несколькими текстовыми полями.

<form>
		<table>
			<tr>
				<td>Имя</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>Почта</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>Сайт</td>
				<td><input type="text"/></td>
			</tr>
		</table>
	</form>

Теперь добавим стиль для текстовых полей. Фон будет выделяться #ffeeac, а граница #aa88ff.

<style type="text/css">
   .focus {
   border: 2px solid #aa88ff;
   background-color: #ffeeac;
}
</style>

Для создания эффекта измения стиля, мы будем использовать два события: focus и blur. При фокусе мы добавляем класс .focus, при блюре убираем. Не забудьте подключить jQuery.

$(function() {
			$('input[type="text"]').focus(function() {
				$(this).addClass("focus");
			});
			$('input[type="text"]').blur(function() {
				$(this).removeClass("focus");
			});
		});

Посмотреть получившийся результат можно, на приведенном ниже примере.
Demo