Teoría
Teoría

Pseudoclases :enabled y :disabled

Ya sabemos trabajar con formularios y varios tipos de campos. Ahora veremos más selectores para darles estilo.

El atributo disabled deshabilita un control: no puedes editarlo ni activarlo. Para seleccionar los controles habilitados, es decir, los que no están deshabilitados, usamos la pseudoclase :enabled.

Por ejemplo:

input:enabled {
  /* algunos estilos */
}

Para seleccionar los controles deshabilitados, usamos la pseudoclase :disabled.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Pseudoclases :enabled y :disabled</title> <meta charset="utf-8"> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="page-header">Formulario de datos personales</header> <main> <form action="https://echo.htmlacademy.ru/courses" method="post"> <fieldset> <legend>Solicitud de visa para la cocina</legend> <label>Nombre del gato</label> <input type="text" name="name" value="Cupcakecito" disabled> <label>Número de pasaporte felino</label> <input type="text" name="passport" pattern="[0-9]{3}-[0-9]{5}" placeholder="Formato: XXX-XXXXX"> <div class="half-width"> <label>Fecha de nacimiento</label> <input type="datetime" name="birthday"> </div> <div class="half-width"> <label>Visitas</label> <select name="type"> <option value="Cada hora">Cada hora</option> <option value="Cada 3 horas">Cada 3 horas</option> <option value="2 veces al día" selected>2 veces al día</option> <option value="1 vez al día">1 vez al día</option> </select> </div> </fieldset> <div class="buttons"> <input type="submit" value="Enviar" disabled> </div> </form> </main> <footer class="page-footer"></footer> </body> </html>

CSS

ObjetivosRealizado

A todos los elementos input deshabilitados, asígnales opacity: 0.5 y el color de fondo #bdc3c7.
A todos los elementos input habilitados, asígnales el borde 1px solid #34495e.
Elimina el atributo disabled del botón y comprueba que su estilo cambie automáticamente.