Teoría
Teoría

Pseudoclases :in-range y :out-of-range

El campo <input type="number"> sirve para introducir números. Sus atributos min y max establecen el valor mínimo y el máximo permitidos. Por ejemplo, con min="1" y max="3", el número 2 está dentro del rango y el 4 queda fuera.

La pseudoclase :in-range selecciona los campos cuyo valor está dentro del rango indicado, incluidos sus límites.

La pseudoclase :out-of-range selecciona los campos cuyo valor queda fuera de ese rango.

Por ejemplo:

input:in-range {}

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Pseudoclases :in-range y :out-of-range</title> <meta charset="utf-8"> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="page-header">Formulario de datos personales</header> <main> <form action="https://codigoheroe.com/echo" method="post"> <fieldset> <legend>Solicitud de visa para la cocina</legend> <div class="half-width"> <label>Nombre del gato</label> <input type="text" name="name" value="Cupcakecito"> </div> <div class="half-width"> <label>Pasaporte felino</label> <input type="text" name="passport" value="PASAPORTE DE CUPCAKE" pattern="[A-z]{4}-[0-9]{5}" placeholder="ABCD-12345"> </div> <div class="half-width"> <label>Almuerzos al día</label> <input type="number" min="1" max="3" value="4"> </div> <div class="half-width"> <label>Cantidad de platos</label> <input type="number" min="1" max="5" value="2"> </div> <div class="half-width"> <label>Fecha de solicitud</label> <input type="datetime" name="date" value="02-06-2014"> </div> <div class="half-width"> <label>Firma</label> <input type="text" name="sign" value="Aquí estuvo Cupcake"> </div> </fieldset> <div class="buttons"> <input type="submit" value="Enviar"> </div> </form> </main> <footer class="page-footer"></footer> </body> </html>

CSS

ObjetivosRealizado

A todos los campos cuyos valores están dentro del rango permitido, asígnales el color de borde #2ecc71.
A todos los campos cuyos valores están fuera del rango permitido, asígnales el color de borde #e74c3c.