CSS :optional Pseudo Clase
Usa la pseudo-clase CSS :optional para seleccionar elementos opcionales. Lee sobre la pseudo-clase y practica con ejemplos.
La pseudo-clase :optional coincide con cada control de formulario que el usuario no está obligado a completar. Es exactamente lo opuesto de :required: un control coincide con uno u otro, pero nunca con ambos.
Un control de formulario es "opcional" simplemente porque carece del atributo required. Esta página explica a qué elementos aplica :optional, cómo se diferencia de pseudo-clases relacionadas y cómo usarla para dar a los usuarios una pista visual sobre qué campos pueden omitir con seguridad.
¿Con qué elementos coincide :optional?
Solo los tres controles de formulario que aceptan el atributo required pueden coincidir con :optional:
<input>(exceptotype="hidden",type="range",type="color", botones y tipos similares que nunca pueden ser obligatorios)<select><textarea>
Cualquiera de estos sin un atributo required coincide con :optional. Los elementos que no pueden ser obligatorios en absoluto — como <div>, <p> o un <button> de envío — nunca coinciden.
:optional vs :required
Estas dos pseudo-clases dividen todos los controles que pueden ser obligatorios:
| Control | Coincide con :required | Coincide con :optional |
|---|---|---|
<input required> | sí | no |
<input> | no | sí |
<select required> | sí | no |
<textarea> | no | sí |
Como las dos nunca se superponen, un patrón común es dejar los campos opcionales neutrales y resaltar solo los obligatorios — o, como en el ejemplo siguiente, difuminar los campos opcionales para que retrocedan visualmente.
Sintaxis
:optional {
/* CSS declarations */
}Puedes encadenar :optional con otros selectores y pseudo-clases (p. ej. :hover, :focus) y con pseudo-elementos (p. ej. ::after) para construir estados más elaborados:
input:optional:focus {
outline: 2px solid #1c87c9;
}Ejemplo
El siguiente ejemplo aplica estilos a los inputs opcionales con un aspecto apagado y semitransparente que se aclara al pasar el cursor, mientras que los inputs obligatorios reciben un borde inferior en negrita para que la diferencia sea obvia a simple vista:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
opacity: 0.5;
transition: .3s;
}
input:optional:hover,
select:optional:hover {
opacity: 1;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:optional selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="text" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="tel" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>Aquí tanto :optional como :required se usan juntos para que los dos tipos de campo sean fáciles de distinguir.
Advertencias
- Los botones de envío no son opcionales. Un
<button>o<input type="submit">no puede ser obligatorio, por lo que nunca coincide con:optional. Aplica estilos a los botones con su propio selector. - Los estados de validación son independientes.
:optionalsolo indica si un campo es obligatorio — no si su valor es válido. Para eso, usa:valide:invalid. - Se actualiza en tiempo real. Si activas o desactivas el atributo
requiredcon JavaScript, el navegador reevalúa:optional/:requiredde inmediato, por lo que el estilo se adapta al instante.
Pseudo-clases relacionadas
:required— el inverso de:optional.:valide:invalid— coinciden con controles según si su valor supera la validación.:enabledy:disabled— coinciden según la interactividad.:read-only— coincide con controles que el usuario no puede editar.