:focus | Псевдокласс CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Псевдоклассы


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


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

Псевдокласс :focus устанавливает стиль элементу при получении им фокуса ввода.




Псевдокласс :focus устанавливает стиль элементу при получении им фокуса ввода.Если Вы установите стили для формы заполняемого поля,то при нажатии на его внутренюю часть отобразится установленный стиль.Существует строгий порядок установки подобных псевдоклассов для ссылок,придерживаться последовательности стоит только при условии наличия других псевдоклассов.Но это имеет отношение только к ссылкам,для остальных комбинаций соблюдение последовательности не актуально.
Порядок последовательности.
a:link {
Свойство ( а ).
}
a:visited {
Свойство ( а ).
}
a:hover {
Свойство ( а ).
}
a:focus {
Свойство ( а ).
}
a:active {
Свойство ( а ).
}
Псевдокласс применим к элементам которые могут получить фокус,создан в версии CSS2 и проходит валидацию согласно версии CSS3.





Псевдокласс работает в браузерах


Пример применения псевдокласса

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


Пример в действии



Поэкспериментируйте сами




Русские шрифты






Источник: http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
Категория: Псевдоклассы | Добавил: IZOTOP (31.05.2012) | Автор: Меренков Михаил W
Просмотров: 910 | Теги: css, свойство, :focus, фокус, пример, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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