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_enabled/index.html | 136 +++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 files/ru/web/css/_colon_enabled/index.html (limited to 'files/ru/web/css/_colon_enabled') diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..0425ffaeda --- /dev/null +++ b/files/ru/web/css/_colon_enabled/index.html @@ -0,0 +1,136 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдо-класс :enabled находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.

+ +

Пример

+ +

Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.

+ +
+

Следующий HTML...

+ +
    <form action="url_of_form">
+      <label for="FirstField">Первое поле (включено):</label> <input type="text" id="FirstField" value="Lorem"><br />
+      <label for="SecondField">Второе поле (отключено):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
+      <input type="button" value="Submit" />
+    </form>
+  
+ +

...используем со следующим CSS...

+ +
input:enabled {
+  color: #22AA22;
+}
+input:disabled {
+  color: #D9D9D9;
+}
+  
+ +

...результат:

+ +
{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}
+ +
Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Без изменений.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Определяет семантику HTML и форм.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Без изменений.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Отсылка к Селекторам Уровня 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Определён псевдо-класс, без семантики.
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatGeckoMobile("1")}}9.09.53.1
+
+ +

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

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