Clase pseudo CSS :valid

La pseudo-clase :valid selecciona controles de formulario (como <input>, <select> y <textarea>) cuyo valor se valida según la configuración del elemento.

El selector :valid se aplica a controles de formulario que cumplen con sus restricciones de validación, como elementos <input> con atributos min y max, campos de correo electrónico con una dirección válida, campos numéricos con un valor numérico, campos de URL o fecha con datos válidos y campos obligatorios con un valor no vacío.

Versión

HTML Living Standard

HTML5

Selectors Level 4

Sintaxis

Sintaxis de CSS :valid

css

:valid {
  css declarations;
}

Ejemplo del selector :valid:

Ejemplo de código CSS :valid

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        border: 1px solid #cccccc;
        padding: 5px 10px;
      }
      input:valid {
        background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:valid selector example</h2>
    <form>
      <input type="email" value="[email protected]" />
    </form>
  </body>
</html>

Try it Yourself »

En el ejemplo anterior, el estilo desaparece cuando se introduce una dirección de correo electrónico no válida.

Práctica

¿Cuál es el uso y la función de la pseudo-clase CSS 'valid'?

La pseudo-clase 'valid' se utiliza para aplicar estilos a todos los elementos HTML que cumplen los criterios de una entrada no válida según las reglas de validación de formularios.La pseudo-clase 'valid' se aplica a los elementos HTML que pasan la validación del lado del cliente.La pseudo-clase 'valid' cambia el contenido de un elemento HTML.Se utiliza para dar estilo a los controles de formulario cuando el usuario envía el formulario.Puede cambiar el color del borde de los campos de entrada cuando contienen datos válidos.

Clase pseudo CSS :valid ​

Versión ​

Sintaxis ​

Ejemplo del selector :valid: ​

Práctica ​

Clase pseudo CSS :valid

Versión

Sintaxis

Ejemplo del selector :valid:

Práctica