La :optionalpseudoclase apunta a las entradas (incluidas las s) que no están configuradas específicamente como required(no tienen el requiredatributo).
Esto puede resultar útil cuando desee dar a los campos opcionales un aspecto específico, quizás un poco menos visible que los obligatorios.
Sintaxis
input(type=text):optional ( border: 1px solid #eee; )Manifestación
En la siguiente demostración, los campos opcionales ("Nombre", "Sexo" y "Continente") tienen su opacidad reducida al 40% para que los usuarios puedan saber inmediatamente cuáles son los campos obligatorios. En este caso, "Correo electrónico". Cuando se desplaza, una entrada opcional hará que la opacidad vuelva al 100%.
Las optionalobras de todo tipo de elementos de formulario: entradas de texto de todo tipo, botones de radio, casillas de verificación, y selecciona.
Nota: no puede saber con CSS solo que una etiqueta está asociada con un campo opcional, a menos que la etiqueta venga después de la entrada (y use un combinador hermano), lo cual es raro y generalmente no es una buena idea. Quizás en el futuro los selectores de padres puedan ayudar con esto.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Alguna | 5+ |
Tenga en cuenta que :optionalno es exactamente lo contrario de :not(:required)porque este último coincidirá con todos los tipos de elementos, mientras que :optionalestá restringido a los elementos del formulario.