Clase pseudo CSS :required
La pseudo-clase CSS :required selecciona los elementos de formulario que tienen el atributo required establecido. Esto permite que los formularios indiquen qué campos deben contener datos válidos antes del envío, ayudando a los usuarios a evitar esperas innecesarias.
Se aplica a los elementos de formulario que admiten el atributo required, como <input>, <select> y <textarea>. El selector :required puede combinarse con pseudo-elementos (p. ej. ::after) y otros selectores (p. ej. :hover). Los elementos no requeridos se pueden personalizar con la pseudo-clase :optional junto con :valid y :invalid, que se activan cuando se cumplen los requisitos de datos de un campo de formulario.
Versión
CSS Basic User Interface Module Level 3
Sintaxis
Sintaxis de :required en CSS
:required {
css declarations;
}Ejemplo del selector :required:
Ejemplo de código de :required en CSS
<!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,
button {
padding: .4em 1em;
}
input {
border: 1px solid #666666;
}
input:optional {
background-color: #eeeeee;
color: #666666;
}
input:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:required 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>En el ejemplo anterior se utilizan tanto el selector de pseudo-clase :optional como el :required.
Práctica
¿Cuál es la función de la pseudo-clase ':required' en CSS?