Как сделать, чтобы текстовое поле при получении фокуса меняло цвет рамки?

🕛 23.01.2009, 00:23

Рамка вокруг текстового поля создается с помощью стилевого атрибута border, который добавляется к селектору INPUT. Фокусом же называется активность элемента, в данном случае, когда курсор находится внутри текстового поля и пользователь может вводить символы с клавиатуры.

За работу фокуса отвечает псевдокласс focus, его необходимо через двоеточие добавить к селектору INPUT или TEXTAREA, как показано в примере 1.

Пример 1. Использование псевдокласса focus

HTML 4.01IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Изменение цвета рамки при </title> <style type="text/css"> INPUT.text { border: 1px solid #ccc; /* Исходная рамка вокруг поля */ width: 80%; /* Ширина поля */ } INPUT.text:focus { border: 1px solid #39c; /* Рамка при получении фокуса */ } </style> </head> <body> <form action=""> <p><input type="text" size="30" class="text"></p> <p><input type="submit" value="Отправить"></p> </form> </body>
</html>

В данном примере вводится класс text, чтобы стиль сработал только для текстового поля, а не для кнопки.

Поскольку псевдокласс focus не поддерживается браузером Internet Explorer, для него можно воспользоваться скриптами. С этой целью помогут событие onFocus, которое срабатывает при получении фокуса и onBlur, при его потере. Предварительно создаем два класса, они задают вид оформления обычного текстового поля и его же при получении фокуса. Далее к тегу <INPUT> добавляем onfocus="this.className='focus'" и onblur="this.className='text'". Здесь focus и text это названия классов (пример 2).

Пример 2. Использование скриптов

HTML 4.01IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Изменение цвета рамки</title> <style type="text/css"> INPUT.text { border: 1px solid #ccc; /* Исходная рамка вокруг поля */ width: 80%; /* Ширина поля */ } .focus { border: 1px solid #39c; /* Рамка при получении фокуса */ width: 80%; /* Ширина поля */ } </style> </head> <body> <form action=""> <p><input type="text" size="30" class="text" onfocus="this.className='focus'" onblur="this.className='text'"></p> <p><input type="submit" value="Отправить"></p> </form> </body>
</html>