From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/_colon_focus/index.html | 115 +++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 files/ru/web/css/_colon_focus/index.html (limited to 'files/ru/web/css/_colon_focus') diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..fb2ecaf22e --- /dev/null +++ b/files/ru/web/css/_colon_focus/index.html @@ -0,0 +1,115 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Reference + - Web + - Веб + - Псевдо-классы + - Раскладка +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

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

+ +
/* Selects any <input> when focused */
+input:focus {
+  color: red;
+}
+ +
+

Примечание: Этот псевдо-класс применяется только тогда, когда в фокусе находится сам элемент. Используйте {{CSSxRef(":focus-within")}}, если вы хотите выбрать элемент, в котором находится сфокусорованный элемент.

+
+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Пример

+ +

HTML

+ +
<input class="red-input" value="Я буду красным, если на меня попадёт фокус">
+<input class="lime-input" value="Я буду лаймовым при фокусе">
+ +

CSS

+ +
.red-input:focus {
+  color: red;
+}
+
+.lime-input:focus {
+  color: lime;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример', '100%', 40)}}

+ +

Проблемы доступности

+ +

Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). WCAG 2.1 SC 1.4.11 Non-Text Contrast (WCAG 2.1 SC 1.4.11 Нетекстовой контраст) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.

+ + + +

:focus { outline: none; }

+ +

Никогда не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования WCAG 2.1 SC 1.4.11 Non-Text Contrast

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Определяет HTML семантику
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Без изменений
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Изначальное определение
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf