4.1 Pseudoclase :checked
Las pseudoclases de formulario en CSS proporcionan oportunidades para estilizar elementos de formulario dependiendo de su estado.
Estas pseudoclases permiten crear formularios interactivos y accesibles, mejorando la interfaz de usuario y la experiencia.
Veamos más en detalle las pseudoclases :checked, :disabled, :enabled y :invalid.
La pseudoclase :checked se aplica a los elementos de formulario que están en estado "seleccionado". Esto se refiere a los checkboxes
(<input type="checkbox">), radiobuttons (<input type="radio">) y opciones (<option>).
Sintaxis:
selector:checked {
propiedades: valores;
}
Ejemplo de uso
En este ejemplo, los checkboxes, radiobuttons y opciones seleccionados obtienen el color de fondo correspondiente cuando están en estado "seleccionado":
/* Estilización de checkbox seleccionado */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Estilización de radiobutton seleccionado */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Estilización de opción seleccionada */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudoclase :disabled
La pseudoclase :disabled se aplica a los elementos de formulario que están en estado deshabilitado. Es útil para
estilizar elementos que están temporalmente no disponibles para interacción.
Sintaxis:
selector:disabled {
propiedades: valores;
}
Ejemplo de uso
En este ejemplo, los campos de entrada y botones deshabilitados obtienen el color de fondo, bordes y texto correspondiente, y también cambian el cursor a "prohibido":
/* Estilización de campo de entrada deshabilitado */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Estilización de botón deshabilitado */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudoclase :enabled
La pseudoclase :enabled se aplica a los elementos de formulario que están en estado habilitado.
Esto permite estilizar elementos disponibles para interacción.
Sintaxis:
selector:enabled {
propiedades: valores;
}
Ejemplo de uso
En este ejemplo, los campos de entrada y botones habilitados obtienen el color de fondo, bordes y texto correspondiente, y también cambian el cursor a "puntero":
/* Estilización de campo de entrada habilitado */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Estilización de botón habilitado */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudoclase :invalid
La pseudoclase :invalid se aplica a los elementos de formulario que no han pasado la validación. Esto permite estilizar
los campos de entrada que contienen datos incorrectos.
Sintaxis:
selector:invalid {
propiedades: valores;
}
Ejemplo de uso
En este ejemplo, los campos de entrada y áreas de texto incorrectos obtienen el color de borde y fondo correspondiente para mostrar visualmente que los datos no pasaron la validación:
/* Estilización de campo de entrada incorrecto */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Estilización de área de texto incorrecta */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Ejemplo de implementación completa
/* Estilización de checkbox seleccionado */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Estilización de radiobutton seleccionado */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Estilización de campo de entrada deshabilitado */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Estilización de botón deshabilitado */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Estilización de campo de entrada habilitado */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Estilización de botón habilitado */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Estilización de campo de entrada incorrecto */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Estilización de área de texto incorrecta */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de pseudoclases de formulario</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION