CSS3 Selectors per campi moduli form
Caratteristiche e novità delle proprietà CSS3 Selectors. Codici ed esempi.
Le nuove proprietà CSS3 selectors permettono a sviluppatori e web designer di creare codifiche a effetto visuale-interattivo prima attuabili solo con l’ausilio di JavaScript. Usare i CSS3 selectors consente un’implementazione più facile, snella e sicura.
In questo tutorial vediamo come creare campi testuali interattivi che vengono marcati con un colore quando selezionati con il cursore. Faremo poi degli esempi con i selector :enabled e :disabled, che determinano se i campi testuali possano essere popolati o no.
Campi testo interattivi
Per creare dei campi di testo interattivi ricorreremo al selector :focus (già presente nelle specifiche CSS2). :focus è supportato da tutti i browser operativi. Nota bene: affinché funzioni su Internet Explorer 8 è necessario dichiarare il <!DOCTYPE>.
input:focus{ background-color:yellow;}In questo esempio abbiamo creato un selector che all’input restituisce un campo marcato di colore giallo.
<html><head><style type="text/css">input:focus{background-color:yellow;}</style></head><body><p>Clicca nel campo per visualizzare lo sfondo giallo:</p><form>Nome: <input type="text" name="nome" /><br />Cognome: <input type="text" name="cognome" /></form></body></html>:enabled e :disabled
Come dicevamo prima, i selector CSS3 :enabled e :disabled determinano se campi input di ogni tipo possano essere popolati o no.
Nel primo esempio useremo :enabled e imposteremo il colore di sfondo giallo per ogni campo popolabile:
input[type="text"]:enabled{background:#ffff00;}Funziona con tutti i browser a eccezione di Internet Explorer 8 e versioni precedenti.
Nella seconda rappresentazione imposteremo un colore di sfondo (grigio) per tutti i campi che non possono essere modificati:
input[type="text"]:disabled{background:#dddddd;}Funziona con tutti i browser a eccezione di Internet Explorer 8 e versioni precedenti.
Ecco un esempio chiarificatore che ingloba entrambe le pseudo classi:
<html><head><style type="text/css"> input[type="text"]:enabled{background:#ffff00;}input[type="text"]:disabled{background:#dddddd;}</style></head><body><form action="">Nome: <input type="text" value="Carlo" /><br />Cognome: <input type="text" value="Rossi" /><br />Età: <input type="text" disabled="disabled" value="dato non necessario" /><br /></form></body></html>