:checked, :disabled y pseudoclases de estado de formularios
Dé estilo a los elementos de formulario según sus estados interactivos, como checked, disabled y required.
:checked, :disabled y pseudoclases de estado de formularios es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Descripción general de las pseudoclases de estado de formularios
CSS proporciona pseudoclases que reflejan los estados de los elementos de formulario HTML. Permiten aplicar estilos a controles de formulario utilizando únicamente CSS, sin JavaScript.
:checked
:checked se aplica a casillas de verificación y botones de opción cuando están seleccionados, y a elementos <option> dentro de elementos select cuando se eligen.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked para casillas personalizadas
La técnica de :checked: oculte el campo de entrada nativo y aplique estilo a una casilla personalizada mediante el selector de hermanos adyacentes activado por :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled y :enabled
:disabled selecciona los elementos de formulario que tienen el atributo disabled. :enabled selecciona los elementos con los que se puede interactuar.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required y :optional
:required selecciona los campos de entrada que tienen el atributo required. :optional selecciona los campos que no lo tienen.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid y :invalid
:valid y :invalid reflejan el estado de validación nativa del formulario en el navegador según las restricciones de tipo, patrón, min/max y required.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid y :user-invalid
La validación del navegador se ejecuta inmediatamente al cargar la página, incluso antes de que el usuario interactúe. :user-valid y :user-invalid solo se aplican después de que el usuario haya interactuado con el campo, lo que ofrece una experiencia de usuario mucho mejor.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown se aplica cuando un campo de entrada muestra su texto de marcador de posición, lo que significa que el campo está vacío. Utilícela para detectar campos vacíos sin JavaScript.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only y :read-write
:read-only selecciona los campos de entrada que tienen el atributo readonly. :read-write selecciona los campos de entrada editables.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate se aplica a las casillas de verificación en un estado intermedio (ni seleccionadas ni sin seleccionar, establecido mediante JavaScript) y a los botones de opción cuando no se ha realizado ninguna selección en el grupo.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range y :out-of-range
En los campos de entrada type="number" o type="range" con min/max, :in-range y :out-of-range reflejan la validez del valor actual con respecto a esos límites.
<input type="number" min="1" max="10" value="15" />
Comprobación rápida
¿Qué pseudoclase aplica estilos de validación del formulario solo después de que el usuario haya interactuado con un campo de entrada?
Repaso
Las pseudoclases de estado de formularios de CSS reflejan la validación nativa y el estado de interacción de los formularios sin JavaScript: :checked, :disabled, :required, :valid, :invalid y otras. Prefiera :user-invalid a :invalid para ofrecer una mejor experiencia de usuario. Utilice :placeholder-shown para detectar campos vacíos.
Preguntas frecuentes
¿La lección «:checked, :disabled y pseudoclases de estado de formularios» es gratis?
Sí — el texto completo de «:checked, :disabled y pseudoclases de estado de formularios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «:checked, :disabled y pseudoclases de estado de formularios»?
Dé estilo a los elementos de formulario según sus estados interactivos, como checked, disabled y required. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «:checked, :disabled y pseudoclases de estado de formularios»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- :hover :focus :active y :visited
- :nth-child y :nth-of-type
- :not(), :is() y :where()
- :checked, :disabled y pseudoclases de estado de formularios