✔Псевдокласс - :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 { ...
Значения
Нет.
Пример
HTML5CSS2.1IECrOpSaFx
<!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>Результат данного примера показан на рис..;1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.
.;
Рис. 1. Результат использования псевдокласса :focus
Браузеры
Chrome не добавляет стиль для селектора a, чтобы заставить его понимать правило a:focus, добавьте к тегу <a> атрибут tabindex.
