Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Функции CSS Полное руководство по селекторам CSS

CSS выборщик :focus

CSS псевдо-класс :focus означает элемент, получивший фокус (например, ввод формы). Он срабатывает при нажатии или касании элемента или при выборе его с помощью клавиши "tab" на клавиатуре.

Полное руководство по CSS-селекторам

Онлайн пример

Выбранный стиль для поля ввода, получившего фокус:

Пример

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Базовый учебник (oldtoolbag.com)</title>　
<style>
input:focus
{
　　　　background-color:orange;
}
</style>
</head>
<body>
<p>Нажмите на текстовое поле в форме, чтобы увидеть желтый фон:</p>
<form>
Имя:　<input　type="text"　name="firstname"　/><br>
Фамилия:　<input　type="text"　name="lastname"　/>
</form>
<p><b>Внимание:</b>　:focus　действует на　IE8,DOCTYPE　должен быть заявлен</p>
</body>
</html>

Проверьте, чтобы увидеть ‹/›

Определение и использование

Выборщик :focus используется для выбора элементов с фокусом.

Подсказка: Выборщик :focus принимает клавишные события или другие элементы пользователя ввода.

Совместимость браузеров

Числа в таблице показывают первую версию браузера, поддерживающую этот свойство.

Выборщик
:focus	4.0	8.0	2.0	3.1	9.6

Внимание: 　Выборщик :focus в IE8 должен быть заявлен<!DOCTYPE> .

Связанные статьи

CSS учебник: CSS псевдо-классы

Полное руководство по CSS-селекторам

Функции CSS Полное руководство по селекторам CSS