Required Inputs in your forms

Como marcar rapidamente todos los elementos required usando solo CSS

Durante la implementacion de un proyecto es posible que algunos campos requeridos ya no lo sean tanto al final. Tambien es posible que en lugar de un * quieran incluir el texto required, o un icono de !, etc. Ir cambiando cada uno de los labels, olvidarte de cambiar uno ... es mucho estres.

Vamos a mostrar una forma de añadir dicho elemento de nuestro codigo desde un archivo CSS.

Primero, tenemos nuestro formulario HTML

<form>
     <div class="form-field">
         <label>Nombre</label>
         <input type="text" name"nombre" required />
     </div>



     <div class="form-field">
         <label>Apellido</label>
         <input type="text" name"nombre" />
     </div>


     <input type="submit" value="Enviar" />

</form>

Con nuestro codigo CSS vamos a buscar los elementos .form-field que tengan un hijo con el attributo required y a esos .form-field vamos a marcar su hijo label.

.form-field:has(:required) label:after{
   content: " required";
   color: red;
   font-size: 0.5em;
}