Validare una form – Parte 4

Styling Le pseudo classi CSS3 ci permettono di disegnare ...

Styling

Le pseudo classi CSS3 ci permettono di disegnare qualsiasi campo della nostra form in base al suo stato. Elenchiamole :

• :valid
• :invalid
• :required
• :optional
• :in-range
• :out-of-range
• :read-only
• :read-write

Ciò significa che si possono avere i campi obbligatori con uno stile, quelli opzionali e con un’altro e così via. Per esempio con queste classi :

input:focus:invalid,
textarea:focus:invalid{
   border:solid 2px #F5192F;
}

input:focus:valid,
textarea:focus:valid{
    border:solid 2px #18E109;
    background-color:#fff;
}

abbiamo combinato i selettori “validi” e “non validi” con la pseudo classe “focus” per colorare i campi modulo rosso o verde quando l’utente li seleziona e inizia a digitare.
Kenji Agency : realizzazione  siti web a Treviso