focus

Браузер	Internet Эксплорер				Нетscape		Опера				Safari			Файер фох
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Краткая информация

CSS (ЦСС)	CSS (ЦСС)2
Применяется	К элементам, которые могут получить фокус (<A>, <INPUT>, <SELECT> и <TEXTAREA>)
Аналог ШТМЛ	<тег onfocus="function()">
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.ШТМЛ#dynamic-pseudo-classes

Описание

Псевдокласс focus определяет стиль для элемента получающего фокус. Например, им может быть контентовое поле формы, в которое устанавливается курсор.

Синтаксис

элемент:focus { ... }

Аргументы

Нет.

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 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=utf-8">
  <title>focus</title>
  <style type="text/CSS (ЦСС)">
   #enter .label {
     width: 80px; /* Ширина блока с контентом */
     float: left; /* Расположение в одну строку с полем */
     text-align: right; /* Выравнивание по правой стороне */
   }
   #enter .form-text {
     width: 240px; /* Ширина поля */
     margin-left: 10px; /* Расстояние между полем и контентом */
     border: 1px solid #abadb3; /* Рамка вокруг контентового поля */
     padding: 2px; /* Поля вокруг контента */
   }
   #enter .form-item {
     margin-bottom: 5px; /* Отступ снизу */
   }
   #enter .form-text:focus {
     background: #ffe; /* Цвет фона */
     border: 1px solid #29B0D9; /* Параметры рамки */
   }
   #enter p {
    margin-left: 90px; /* Сдвиг вправо */
   }
  </style>
 </head>
 <body>
  <form action="login.php" method="post" id="enter">
   <div class="form-item">
     <span class="label">Логин:</span>
     <span class="field"><input type="text" id="login" value="" class="form-text"></span>
   </div>
   <div class="form-item">
     <span class="label">Пароль:</span>
     <span class="field"><input type="password" id="pass" class="form-text"></span>
   </div>
   <p><input type="submit" value="Войти"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1. При получении фокуса контентовое поле меняет цвет фона и цвет границы.

Рис. 1

Рис. 1. Результат использования псевдокласса focus