Справочник по CSS (ЦСС) и ШТМЛ
Как сделать, чтобы контентовое поле при получении фокуса меняло цвет рамки?
Рамка вокруг контентового поля создается с помощью стилевого атрибута border, который добавляется к селектору INPUT. Фокусом же имеется ввиду активность элемента, в данном случае, курсор находится внутри контентового поля и пользователь может вводить символы с клавиатуры.
За работу фокуса отвечает псевдокласс focus, его необходимо через двоеточие добавляем к селектору INPUT или TEXTAREA.
Пример
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<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">
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Результат примера показан ниже. Чтобы поле получило фокус, щелкните внутри элемента, а для потери фокуса щелкните на любом месте рядом с ним.
В данном примере вводится класс text, чтобы стиль сработал только для контентового поля, а не для кнопки.
Замечание
Браузер Internet Эксплорер не поддерживает псевдокласс focus, поэтому приведенный метод в нем работать не будет.