El selector :opcional en CSS se usa para seleccionar y diseñar los elementos de entrada del formulario que son opcionales. Es decir, puede seleccionar aquellos elementos de entrada de un formulario HTML que no están declarados como «requeridos».
Sintaxis:
:optional {
/* css declarations; */
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>optional Selector</title>
<style>
/* Select optional fields and change
color to Yellow */
input:optional {
background-color: yellow;
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h3>A demonstration of the :optional selector.</h3>
<!-- Create an HTML form -->
<form>
<!-- Optional Input -->
<label>An optional input element:</label><br />
<input>
<br /><br />
<!-- Required Input -->
<label>A required input element:</label><br />
<input required>
</form>
<p>
The :optional selector selects form elements
with no "required" attribute.
</p>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con el selector «:opcional» se enumeran a continuación:
- Google Chrome 50.0, 4.0 -webkit-
- Internet Explorer 10.0
- Firefox 52.0, 2.0 -moz-
- Safari 9.0, 3.1 -webkit-
- Opera 37.0, 15.0 -webkit-, 11.1