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_disabled/index.html | 127 ++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/es/web/css/_colon_disabled/index.html (limited to 'files/es/web/css/_colon_disabled') diff --git a/files/es/web/css/_colon_disabled/index.html b/files/es/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..ce16ddb96e --- /dev/null +++ b/files/es/web/css/_colon_disabled/index.html @@ -0,0 +1,127 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

La pseudo-clase :disabled de CSS representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado (por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.

+ +
/* Selecciona cualquier <input> deshabilitado */
+input:disabled {
+  background: #ccc;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Este ejemplo muestra un formulario de envío básico. Utiliza el evento JavaScript {{event("change")}} para permitir al usuario habilitar / deshabilitar los campos de facturación.

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>Dirección de Envío</legend>
+    <input type="text" placeholder="Nombre">
+    <input type="text" placeholder="Dirección">
+    <input type="text" placeholder="Código postal">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>Dirección de facturación</legend>
+    <label for="billing_is_shipping">Igual que la dirección de envío:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="Nombre" disabled>
+    <input type="text" placeholder="Dirección" disabled>
+    <input type="text" placeholder="Código postal" disabled>
+  </fieldset>
+</form>
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+ +

JavaScript

+ +
// Esperar a que la página termine de cargarse
+document.addEventListener('DOMContentLoaded', function () {
+  // Adjunte el detector de eventos `change` al checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Seleccione los campos de texto de facturación
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Alternar los campos de texto de facturación
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 300, 250)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Define la semántica referente a HTML y los formularios.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Referencia a los selectores de Nivel 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Define la pseudo clase pero no la semántica asociada..
+ +

Compatibilidad con navegadores

+ +

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

+ +

Ver también

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