Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
In CSS la pseudoclasse dinamica :focus reagisce ad un elemento che ha ricevuto un focus dall’utente, ad esempio un campo di testo che viene cliccato per essere compilato.
Risulta molto utile per rendere noto all’utente con quale campo sta interagendo.
Ad esempio vediamo il codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
input.esempio:focus {background-color:yellow;} /* applicato a tutti gli oggetti input con classe esempio */
</style>
</head>
<body>
<form>
First name: <input class="esempio" type="text" name="firstname" />
</form>
</body>
</html>
Il risultato qui sotto, provare a cliccare l’input box di testo vedere l’effetto finale:
La regola CSS:
input.esempio:focus {background-color:yellow;} -> oggetto:focus{regola di stile}
Assegnata in body a:
input class=”esempio”…
La regola può diventare più restrittiva, ad esempio utilizzando un selettore di attributo:
input[type="text"]:focus {background-color:yellow;}
