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

pseudo-classe CSS  :enabled representa qualquer elemento ativado. Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.

+ +
/* Seleciona qualquer <input> ativado */
+input:enabled {
+  color: blue;
+}
+ +

Sintaxe

+ +
{{csssyntax}}
+ +

Exemplo

+ +

O exemplo a seguir torna a cor do texto e do botão <input> verde quando ativada e cinza quando desativada. Isso ajuda o usuário a entender quais elementos podem ser interagidos..

+ +
+

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 550, 95)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}No change.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Defines the semantics for HTML and forms.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Links to Selectors Level 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Defines the pseudo-class, but not the associated semantics.
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

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