Псевдокласс :focus

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

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

Применяется	К элементам, которые могут получить фокус (<a>, <input>, <select> и <textarea>)
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Другими словами, псевдокласс :focus устанавливает стиль элементу при получении им фокуса ввода. Если установить стили для формы заполняемого поля, то при нажатии на его внутренюю часть, отобразится установленный стиль. Существует строгий порядок установки подобных псевдоклассов для ссылок, придерживаться последовательности стоит только при условии наличия других псевдоклассов. Но это имеет отношение только к ссылкам, для остальных комбинаций соблюдение последовательности не актуально.

Порядок последовательности:


a:link {
Свойство ( а ).
}
a:visited {
Свойство ( а ).
}
a:hover {
Свойство ( а ).
}
a:focus {
Свойство ( а ).
}
a:active {
Свойство ( а ).
}

Псевдокласс применим к элементам которые могут получить фокус,создан в версии CSS2 и проходит валидацию согласно версии CSS3.

Синтаксис

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

Значения

Нет.

Пример

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>focus</title>
 <style>
 #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" name="login" value="" class="form-text"></span>
 </div>
 <div class="form-item">
 <span class="label">Пароль:</span>
 <span class="field"><input type="password" name="pass" class="form-text"></span>
 </div>
 <p><input type="submit" value="Войти" /></p>
 </form>
 </body>
</html>

Результат данного примера. Выделите поле ввода мышкой.

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :focus</title>
<style type="text/css">
<!--
input{
border:5px solid red;
background:grey;
margin-bottom:10px;
color:white;
}
input:focus#one {
border:5px double green;
background:indigo;
}
input:focus#two {
border:5px dotted blue;
background:gold;
color:black;
}
-->
</style>
</head>
<body>
<fieldset>
<form>
<div>
<input type="text" id="one">
</div>
<div>
<input type="text" id="two">
</div>
</form>
</fieldset>
</body>
</html>

Результат примера 2. Выделите мышкой поле ввода.

Браузеры

Chrome не добавляет стиль для селектора <a>, чтобы заставить его понимать правило a:focus, добавьте к тегу <a> атрибут tabindex.

<a href="1.html" tabindex="1">Ссылка</a>

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Псевдоклассы | Добавил: evkuriy (07.07.2013)

Просмотров: 772 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]