Приложения вроде Excel выделяют поле формы, на которое пользователь смещает фокус, перемещая указатель мыши или используя табуляцию. Можно ли создать аналогичный эффект для нашей веб-формы?

Решение
Благодаря наличию псевдокласса :focus такого эффекта можно достичь исключительно средствами CSS. Предлагаемое решение будет корректно работать во всех современных броузерах, в том числе и Internet Explorer 8, но не в Internet Explorer 6 и 7:

table.formdata input {
width: 80px;
padding: 0.2em 0.4em 0.2em 0.4em;
margin: 0;
border: 2px solid #FFFFFF;
}
.formdata input:focus {
border: 2px solid #000000;
}

На рис. 6.19 показан результат обработки данного кода.

Рис. 6.19. Выделение поля формы, на которое наведен фокус (в Firefox)  (DEMO)

Обсуждение
Добавить рамку или изменить цвет фона поля формы при смещении фокуса на него достаточно просто. На самом деле для этого достаточно всего лишь воспользоваться селектором псевдокласса :focus для изменения стиля отображения элемента input, когда пользователь щелкает по нему мышью.

Как уже было сказано, к сожалению, Internet Explorer 6 не поддерживает псевдокласс :focus, поэтому часть пользователей вашего приложения не увидят данный эффект.

У этой проблемы есть решение, однако оно требует применения Java-Script. Добавьте в ваш документ после таблицы следующий код:

<script type=”text/javascript”>
var editcells =
document.getElementById(‘form1’).getElementsByTagName(‘input’);
for (var i = 0; i < editcells.length; i++) {
editcells[i].onfocus = function() {
this.className += ‘ hilite’;
}
editcells[i].onblur = function() {
this.className = this.className.replace(‘hilite’, ‘’);
}
}
</script>

Помимо добавления данного сценария нужно добавить в файл с CSS-кодом класс hilite, задав для него те же правила, что и ранее для псевдокласса :focus:

.formdata input:focus, .formdata input.hilite {
border: 2px solid #000000;
}

Теперь поле будет выделяться и в Internet Explorer 6, а кроме того, во всех броузерах, поддерживающих псевдокласс :focus.