CSS :required Pseudoclase - Aprende CSS

La pseudoclase CSS :required coincide con cualquier control de formulario cuyo atributo required esté definido. Úsala para marcar visualmente los campos que el usuario debe rellenar antes de enviar el formulario — un pequeño asterisco, un borde de color o un mensaje de aviso — para que las personas no lleguen al botón de envío solo para ser rechazadas por un error de validación.

Esta página cubre qué elementos coincide :required, cómo difiere de :optional y las pseudoclases de validez, la advertencia de accesibilidad que debes conocer y un ejemplo funcional que puedes ejecutar.

¿Con qué elementos coincide `:required`?

:required solo coincide con elementos que realmente soportan el atributo required y lo tienen definido:

<input> (de un tipo que puede ser requerido — text, email, password, tel, url, number, date, checkbox, radio, file, etc.)
<select>
<textarea>

No coincide con <button>, <input type="submit">, <input type="hidden">, ni con ningún elemento donde required no tiene significado. La coincidencia es dinámica: si añades o eliminas el atributo required con JavaScript, el estilo se actualiza inmediatamente.

`:required` vs. pseudoclases relacionadas

:required describe el estado de la restricción, no si el usuario la ha satisfecho. Combínala con sus vecinas apropiadas:

Pseudoclase	Coincide cuando…
`:required`	el campo tiene el atributo `required`
`:optional`	el campo no tiene `required`
`:valid`	el valor actual del campo supera sus restricciones
`:invalid`	el valor actual del campo falla sus restricciones

Cada control de formulario es :required u :optional, por lo que puedes dividir el estilo claramente entre los dos. Los estados de validez (:valid / :invalid) reaccionan a medida que el usuario escribe.

Sintaxis

:required {
  /* CSS declarations */
}

Normalmente se delimita a un tipo de control para que la regla no afecte a elementos no relacionados:

input:required,
select:required,
textarea:required {
  border-left: 3px solid #1c87c9;
}

Nota de accesibilidad

Solo el estilo (color, un borde más grueso) no es suficiente — los usuarios daltónicos o de lectores de pantalla pueden pasarlo por alto. Mantén el atributo nativo required en el control (expone el requisito a las tecnologías de asistencia y activa la validación del navegador) y refuérzalo con una indicación visual de texto, como un asterisco. :required es para el acabado visual, no para la información.

Ejemplo

El siguiente ejemplo marca los campos requeridos con un borde inferior azul y atenúa los opcionales usando :optional:

<!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>

Pruébalo tú mismo »

Los campos requeridos Name y Email obtienen el subrayado azul; los campos opcionales Phone y Address obtienen el fondo gris — todo impulsado por las reglas :required y :optional.

Soporte de navegadores y especificación

:required está soportado en todos los navegadores modernos desde hace años, por lo que puedes usarlo sin un fallback. Está definido en dos especificaciones:

Temas relacionados

:optional — el inverso: aplica estilos a controles sin required.
:valid e :invalid — reaccionan según si el valor introducido supera sus restricciones.
:focus — combina con :required para resaltar el campo obligatorio activo.
:disabled y :checked — otras pseudoclases de estado de formulario.
HTML Forms — donde se define el atributo required.

Práctica

¿Cuál es la función de la pseudoclase ':required' en CSS?

Selecciona cada elemento `<input>` con un atributo 'required'Selecciona cada elemento `<input>` sin un atributo 'required'Incrusta imágenes en el archivo CSSSe usa para seleccionar los elementos que tienen el atributo required en el formularioAjusta el tamaño de las imágenes en CSS

¿Con qué elementos coincide :required?

:required vs. pseudoclases relacionadas