From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/_colon_enabled/index.html | 103 +++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 files/es/web/css/_colon_enabled/index.html (limited to 'files/es/web/css/_colon_enabled') diff --git a/files/es/web/css/_colon_enabled/index.html b/files/es/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..c91360c9ab --- /dev/null +++ b/files/es/web/css/_colon_enabled/index.html @@ -0,0 +1,103 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

La pseudo-clase :enabled CSS representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él, acepta que se le introduzca texto, etc.) o si accepta el foco. El elemento también tiene un estado deshabilitado el en cuál, no puede ser activado ni acepta el foco.

+ +
/* Selecciona cualquier <input> habilitado */
+input:enabled {
+  color: blue;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

El siguiente ejemplo hace que el color del texto y el botón {{htmlElement ("input")}} sean verdes cuando están habilitados, y grises cuando están deshabilitados. Esto ayuda al usuario a comprender con qué elementos se puede interactuar.

+ +

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">Primer campo (habilitado):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Segundo campo (deshabilitado):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Enviar">
+</form>
+
+ +

CSS

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

Resultado

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Define la semántica en relación con HTML y los formularios.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Enlaza con selectores nivel 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Define la pseudo clase pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

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

+ +

Ver también

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