Краткие рецепты по 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="">
<p><input type="text" size="30" class="text">
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Результат примера показан ниже. Чтобы поле получило фокус, щелкните внутри элемента, а для потери фокуса щелкните на любом месте рядом с ним.
В данном примере вводится класс text, чтобы стиль сработал только для текстового поля, а не для кнопки.
Замечание
Браузер Internet Explorer не поддерживает псевдокласс focus, поэтому приведенный метод в нем работать не будет.