focus

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да

 

CSS CSS2
Применяется К элементам, которые могут получить фокус (<A>, <INPUT>, <SELECT> и <TEXTAREA>)
Аналог HTML <тег onfocus="function()">

Описание

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

Синтаксис

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

Значения

Нет.

Пример

<!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>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>

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