Redazione
a- a+

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>



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!