El :requiredselector de pseudo clases en CSS permite a los autores seleccionar y aplicar estilo a cualquier elemento coincidente con el requiredatributo. Los formularios pueden indicar fácilmente qué campos deben tener datos válidos antes de que se pueda enviar el formulario, pero permite al usuario evitar la espera en que se incurre al hacer que el servidor sea el único validador de la entrada del usuario.
Digamos que tenemos una entrada con un atributo de type="name"y la convertimos en una entrada requerida usando el requiredatributo booleano 1 :
Ahora podemos diseñar esa entrada usando el :requiredselector de pseudo clases:
/* style all elements with a required attribute */ :required ( background: red; )También podemos diseñar los campos de formulario requeridos usando selectores simples, así como encadenando selectores de pseudo clases adicionales:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Manifestación
Vea el lápiz: estilo requerido por Chris Coyier (@chriscoyier) en CodePen.
Puntos de interés
El requiredatributo se trata como un booleano, lo que significa que no requiere un valor. El simple hecho de tener requiredun elemento le permite al navegador saber que este atributo existe y que la entrada correspondiente es de hecho un campo obligatorio. Aunque, de acuerdo con la especificación W3C, el atributo requerido también funciona con un valor vacío o un valor con el nombre de los atributos.
El atributo obligatorio también solicita que el navegador utilice llamadas nativas, como el mensaje de burbuja que se muestra en la demostración.
Para aquellas entradas que no tienen estilo :required, los autores también pueden personalizar elementos no requeridos usando el :optionalselector de pseudo clases junto con :invalidy :validque se activan cuando se cumplen los requisitos de datos de un campo de formulario.
La validación del formulario también se puede complementar junto requiredcon el patternatributo para ayudar a filtrar los datos según el typeatributo de la entrada . Los patrones se pueden escribir como una expresión regular o una cadena. En el siguiente ejemplo, estamos usando una expresión regular para hacer coincidir la sintaxis de una dirección de correo electrónico.
El :requiredatributo funciona en botones de opción. Si coloca requerido en un botón de opción (o en todos), ese grupo particular de botones de opción será requerido. En las casillas de verificación, hace que cada casilla de verificación individual sea obligatoria (para marcar).
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10,3 |
1 Atributos booleanos : varios atributos en HTML5 son atributos booleanos. La presencia de un atributo booleano en un elemento representa el valor verdadero y la ausencia del atributo representa el valor falso. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que no distinga entre mayúsculas y minúsculas del nombre canónico del atributo, sin espacios en blanco iniciales ni finales.