Полезные советы по CSS и HTML

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

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

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

Пример

<!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="">
<input type="text" size="30" class="text">
<input type="submit" value="Отправить">
</form>
</body>
</html>

Результат примера показан ниже. Чтобы поле получило фокус, щелкните внутри элемента, а для потери фокуса щелкните на любом месте рядом с ним.

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

Замечание

Браузер Internet Explorer не поддерживает псевдокласс focus, поэтому приведенный метод в нем работать не будет.

Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

Полезные советы по CSS и HTML

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