L’autore ha selezionato il Fondo per la Diversità nel Settore Tecnologico per ricevere una donazione come parte del programma Scrivi per Donazioni.
Introduzione
I moduli web sono un elemento comune nel design dei siti web, che vanno dalla semplice casella di ricerca ai moduli di contatto e ai filtri dati complessi. Sapere come utilizzare il CSS per stilizzare e lavorare con questi elementi aiuta a fornire soluzioni migliori a questi problemi quotidiani e può migliorare l’esperienza dell’utente del tuo sito web.
Questo tutorial copre la creazione e lo stile di un modulo web che richiede vari dati dall’utente. Il modulo utilizzerà campi di testo, pulsanti radio, caselle di controllo, selezioni a discesa, un’area di testo e pulsanti di invio e reset. Creerai e stilizzerai questo modulo e i suoi elementi reimpostando gli stili con la proprietà appearance, impostando il tuo stile coerente per il modulo, aggiungendo risposte segnaposto per i campi di testo e personalizzando i pulsanti radio e le caselle di controllo con varie pseudo-classi e pseudo-elementi.
Prerequisiti
- Esperienza nell’uso di selettori avanzati per trovare e applicare stili agli elementi HTML con CSS. Per ulteriori informazioni, consulta il tutorial su Come Selezionare Elementi HTML Utilizzando ID, Classe e Selettori di Attributi in CSS.
- Conoscenza del modello box CSS, che puoi trovare nel tutorial su Come Lavorare con il Modello Box in CSS.
- Familiarità con le pseudo-classi in CSS. Dai un’occhiata a Come Utilizzare Link e Pulsanti con Pseudo-Classi di Stato in CSS per un’introduzione.
- Un file HTML vuoto salvato sul tuo computer locale come
index.html, a cui puoi accedere dal tuo editor di testo e browser web preferiti. Per iniziare, consulta il nostro tutorial su Come Configurare il Tuo Progetto HTML, e segui le istruzioni su Come Utilizzare e Capire gli Elementi HTML per visualizzare l’HTML nel tuo browser. Se sei nuovo di HTML, prova tutta la serie su Come Costruire un Sito Web con HTML.
Impostazione del codice HTML e CSS di base
In questa prima sezione, configurerai l’HTML e gli stili iniziali con cui lavorerai durante il resto del tutorial. Questo HTML stabilirà la struttura di base della pagina e creerà i campi del modulo che stylerai in seguito.
Comincia aprendo il file index.html nel tuo editor. Poi, aggiungi il seguente HTML per fornire una struttura di base per il file:
Gli elementi contenuti nell’elemento <head> definiscono il nome della pagina con l’elemento <title> e dove caricare il foglio di stile tramite l’elemento <link>. I tag <meta> definiscono la codifica dei caratteri e istruiscono il browser su come visualizzare il sito sui dispositivi a schermo piccolo. I contenuti principali del modulo risiederanno all’interno dei tag <body> e <main>.
Successivamente, all’interno dell’elemento <main>, crea un elemento <form>. All’interno del <form> aggiungerai vari elementi di modulo e elementi <div> per aiutare con il layout. In questo tutorial, gli aggiornamenti al codice dei passaggi precedenti sono evidenziati. Aggiungi l’HTML evidenziato dal blocco di codice seguente al tuo file index.html:
La struttura del modulo HTML consiste in valori di attributi interconnessi per funzionare correttamente. Questo codice crea un modulo che chiede all’utente il proprio nome e indirizzo email, chiede il compilatore CSS preferito e se conoscono CSS grid, fornisce un campo per un messaggio generato dall’utente e ha una casella di controllo per iscrivere l’utente a una newsletter. Per saperne di più su come strutturare i moduli in HTML, consultare la pagina Mozilla Web Docs sulla struttura dei moduli web.
Assicurati di salvare le modifiche su index.html, quindi crea un nuovo file nella stessa directory chiamato styles.css.
Apri styles.css nel tuo editor di testo. Questo file fornisce gli stili che il browser applicherà ai contenuti di index.html. Aggiungi il seguente codice CSS al tuo file styles.css:
Il selettore degli elementi body e main crea uno stile di testo e layout iniziale per l’intera pagina. Il selettore dell’elemento form crea gli stili per il contenitore complessivo del modulo e quindi definisce una griglia CSS composta da due colonne di dimensioni uguali con grid-template-columns: 1fr 1fr;. Quindi, il gap: 2rem fornisce uno spazio di 2rem tra ogni riga e colonna nella griglia. Infine, il selettore della classe .full-width consente ai contenitori con questa classe di estendersi tra le due colonne invece di rimanere in una sola colonna.
Salva le tue modifiche al file styles.css. Successivamente, apri un browser web a tua scelta. Seleziona la voce di menu File nel browser e poi seleziona l’opzione Apri. Successivamente, naviga nella cartella del tuo progetto e carica il file index.html nel browser. L’immagine seguente dimostra come la pagina verrà visualizzata nel browser:
Il modulo viene visualizzato in una casella bianca su uno sfondo grigio chiaro. Ciascun elemento del modulo è disperso nella griglia con i primi quattro elementi alternati tra le due colonne e gli ultimi tre impilati, coprendo le due colonne. Lo stile predefinito degli elementi del modulo è come appaiono in Firefox; ogni browser ha un diverso stile predefinito per gli elementi del modulo.
In questa sezione, imposti l’HTML e il CSS iniziali necessari per lavorare con gli elementi del modulo. Hai anche appreso che ogni browser gestisce lo stile di questi elementi in modo diverso. Nella prossima sezione, utilizzerai la proprietà appearance per uniformare lo stile degli elementi del modulo su tutti i browser.
Reimpostazione dello stile del modulo con la proprietà appearance
Ogni browser gestisce lo stile visivo degli elementi del modulo in modo diverso. Spesso lo stile di questi elementi va oltre le capacità iniziali del CSS e segue l’estetica del sistema operativo o del linguaggio di design proprio del browser. Per creare uno stile coerente per tutti i browser, in questa sezione userai la proprietà appearance e altre proprietà per rimuovere gli stili predefiniti del browser.
Per iniziare, apri styles.css nel tuo editor di testo. Crea un nuovo selettore di gruppo composto da button, fieldset, input, legend, select e textarea. Poi, all’interno del blocco del selettore, aggiungi la proprietà appearance impostata su none, come evidenziato nel seguente blocco di codice:
La proprietà appearance è il modo previsto per rimuovere lo stile speciale dagli elementi del modulo. Tuttavia, a causa dell’età e dell’implementazione di questa proprietà, la maggior parte dei browser richiede comunque un prefisso del fornitore aggiunto al nome della proprietà. Un prefisso del fornitore è un’aggiunta codificata speciale anteposta al nome della proprietà come identificatore per un browser specifico. Per Chrome, Safari e le versioni recenti di Edge e Opera, quel prefisso è -webkit-. Firefox utilizza il prefisso -moz-.
Quando si lavora con i prefissi dei fornitori, è importante mettere prima le versioni dei prefissi dei fornitori di una proprietà e terminare con la versione non prefissata. In questo modo, i vecchi browser che supportano solo la proprietà prefissata utilizzeranno il prefisso, ma i nuovi browser che supportano sia il prefisso che le versioni non prefissate utilizzeranno la versione standard non prefissata. Aggiungi i prefissi evidenziati delle proprietà appearance come formattato nel seguente blocco di codice:
Salva le tue modifiche su styles.css e poi apri index.html nel tuo browser. Le proprietà appearance hanno rimosso lo stile decorativo e sono passate a uno stile più semplice, come visualizzato nell’immagine seguente:
La proprietà appearance ti consente solo di cambiare lo stile specifico del browser. Il cambiamento più grande che ha apportato il valore della proprietà appearance: none è stato quello di rimuovere completamente i pulsanti radio e le caselle di controllo. Per il resto degli elementi del modulo, sono necessarie alcune proprietà in più per rimuovere completamente gli stili predefiniti. Le proprietà CSS evidenziate nel seguente blocco di codice aggiungono gli stili necessari per rimuovere gli stili predefiniti:
Questo CSS rimuove il colore di sfondo e reimposta i parametri del modello di box. Non tutti questi stili sono necessari per tutti gli elementi, ma è accettabile raggruppare questi stili di reset su tutti gli elementi.
Salva le tue modifiche su styles.css, quindi aggiorna index.html nel browser. Gli elementi del modulo sono visivamente scomparsi dalla pagina, come mostrato nell’immagine seguente:
In questa sezione, hai utilizzato appearance e proprietà aggiuntive per rimuovere completamente gli stili predefiniti dagli elementi del modulo. Hai inoltre utilizzato i prefissi del venditore per applicare correttamente la proprietà per le future versioni del browser. Nella sezione successiva, inizierai a personalizzare lo stile visivo dei campi del modulo.
Impostare Stili Coerenti Tra i Campi del Modulo
Ora che gli stili predefiniti del browser sono stati completamente rimossi, applicherai un’estetica personalizzata coerente su tutti gli elementi del modulo. Ciò comporterà la creazione di vari selettori di gruppo che mirano a caratteristiche specifiche del modulo per ricevere gli stili appropriati.
Per iniziare, apri styles.css nel tuo editor di testo. Quindi, crea un selettore di gruppo composto da input, select e textarea. Aggiungi gli stili evidenziati dal seguente blocco di codice:
Questi stili aggiungono un bordo grigio scuro di 2px intorno a ciascuno degli elementi di inserimento dati, insieme a uno sfondo bianco e angoli arrotondati.
Successivamente, applicherai gli stili per gli elementi di inserimento dati che contengono testo. Utilizzerai un selettore di attributi per specificare quali elementi input mirare in base al valore dell’attributo type. Il CSS evidenziato nel seguente blocco di codice fornisce gli stili per gli elementi necessari:
Questi stili applicano una dimensione e una famiglia del carattere coerenti su tutti gli elementi. L’elemento <textarea>, ad esempio, non eredita le impostazioni del carattere dall’elemento body. Le proprietà display, box-sizing, width e padding forniscono un layout e una struttura coerenti per ciascuno di questi elementi di inserimento dati.
Salva le tue modifiche in styles.css e quindi apri index.html nel tuo browser web. Come visualizzato nell’immagine seguente, i campi ora hanno un bordo grigio scuro più spesso intorno a loro e il testo dell’elemento <select> è ora molto più grande:
Successivamente, ci sono due elementi che necessitano di uno stile speciale oltre allo stile generale che hai già scritto. Il primo è quello di dare più altezza al textarea, e il secondo è quello di applicare una freccia a discesa personalizzata all’elemento <select>.
Torna a styles.css e aggiungi un selettore per l’elemento textarea. All’interno del blocco del selettore, crea una proprietà min-height impostata su un valore di 10rem. Questo creerà un’area iniziale più grande per l’utente del modulo per inserire del testo. Il CSS evidenziato nel seguente blocco di codice illustra come è scritto questo:
Dopo aver aggiunto gli stili per il textarea, la prossima cosa da fare è creare una directory image. Ciò può essere fatto eseguendo quanto segue nel prompt dei comandi dalla stessa directory dei tuoi file index.html e styles.css:
Successivamente, esegui il seguente curl comando per scaricare la prima immagine con cui lavorerai nella nuova directory images:
L’immagine che hai scaricato è un SVG, che è un linguaggio di markup simile all’HTML con lo scopo di disegnare forme.
Per aggiungere questa nuova immagine all’elemento <select>, torna a styles.css. Quindi, crea un selettore per l’elemento select e aggiungi una proprietà background con il valore evidenziato nel seguente blocco di codice:
Questa proprietà background carica l’immagine nello sfondo dell’elemento <select> e non ripete l’immagine. Poi la centra verticalmente con center e la sposta dal lato destro con right 0.75rem.
Salva le modifiche a styles.css, quindi torna al browser per aggiornare la pagina. Il <textarea> è ora circa il doppio della sua altezza originale e l’elemento <select> ha una freccia blu rivolta verso il basso sul lato destro. L’immagine seguente illustra come viene reso ciò nel browser:
In questa sezione hai creato un’estetica personalizzata per gli elementi di inserimento dati del modulo. Hai anche creato uno sfondo per l’elemento <select> per sostituire la freccia predefinita. Nella prossima sezione, creerai pulsanti radio e caselle di controllo personalizzati e applicherai stati selezionati quando sono spuntati.
Personalizzazione dei pulsanti radio e delle caselle di controllo con la pseudo-classe :checked
Ora che hai creato l’estetica di base del modulo, è il momento di applicare quello stile visivo agli elementi input interattivi di un pulsante radio e di una casella di controllo.
Inizia aprendo styles.css nel tuo editor di testo. Cambierai gli elementi input con un attributo type di radio o checkbox per avere un valore di altezza e larghezza uguale. Poi trasformerai i pulsanti radio in cerchi. Le porzioni evidenziate del blocco di codice seguente mostrano come è formattato ciò:
La proprietà vertical-align è destinata all’allineamento degli elementi di testo in linea. Impostandola su middle, i campi di input si troveranno al centro dell’allineamento del testo. Quindi, l’input radio con una proprietà border-radius di 50% creerà un cerchio perché altezza e larghezza sono uguali.
Salva le tue modifiche in styles.css e poi apri index.html nel tuo browser. I due pulsanti radio e la casella di controllo sono ora più grandi e più evidenti come mostrato nell’immagine seguente:
Se interagisci con i pulsanti radio o la casella di controllo, non accadrà nulla di visibile. La proprietà appearance rimuove anche gli indicatori selezionati per questi tipi di input. Successivamente, utilizzerai il selettore di classe pseudo :checked per applicare stili all’elemento di input selezionato.
Torna a styles.css e crea un nuovo selettore per l’input del pulsante radio con una classe pseudo :checked. Quindi, all’interno del blocco del selettore, aggiungi un background-image con un radial-gradient in modo che uno stile riempito possa essere applicato ai pulsanti radio selezionati. Il CSS evidenziato dal seguente blocco di codice mostra come è formattato:
La funzione calc() consente di impostare la proprietà transparent su 1px dopo il valore del colore, creando un cerchio blu pieno all’interno del campo di input.
Salva le tue modifiche a styles.css e torna a index.html nel tuo browser. Ora i pulsanti radio hanno un cerchio blu pieno circondato dal bianco all’interno dell’input. L’immagine seguente mostra il pulsante radio Sì selezionato:
Successivamente, la casella di controllo utilizzerà un’immagine di sfondo per indicare il suo stato :checked, simile alla freccia del menu a discesa <select>.
Esegui il seguente comando curl per scaricare l’immagine del segno di spunta nella tua directory images:
Ora che hai scaricato l’immagine e sei pronto per usarla, torna a styles.css nel tuo editor di testo.
Successivamente, aggiungi un selettore input[type="checkbox"] con un pseudo-classe :checked allegato. Nel blocco del selettore, aggiungi una proprietà background che carica l’immagine check.svg e la scala per adattarla alla casella. Il CSS evidenziato nel seguente blocco di codice indica come è scritto ciò:
I valori della proprietà background garantiscono che l’immagine del segno di spunta sia centrata nel contenitore, non si ripeta e venga ridimensionata proporzionalmente al 75%.
Salva le modifiche in styles.css e aggiorna la pagina nel browser. Quando selezioni la casella di controllo Ricevi la nostra newsletter, ora compare un segno di spunta all’interno, come illustrato nell’immagine seguente:
In questa sezione, hai creato pulsanti radio e campi di input personalizzati e li hai fatti regolare il loro stato selezionato attraverso l’uso della pseudo-classe :checked. Nella prossima sezione, stilizzerai gli elementi <label> e <legend> sulla pagina.
Aggiunta di stili speciali a Etichette e Leggende
Gli elementi successivi da stilizzare sono gli elementi <label> e <legend> nel modulo. Ci sono due stili differenti che verranno utilizzati: uno stile di etichetta piccolo per i pulsanti radio e le caselle di controllo e uno stile di etichetta grande per gli elementi rimanenti.
Apri index.html nel tuo editor di testo. Aggiungerai un attributo class a ciascun <label> e <legend> con un valore di large-label o small-label, come evidenziato nel seguente blocco di codice:
...
<form>
<div>
<label for="name" class="large-label">Name</label>
<input id="name" type="text" />
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp" class="large-label">Favorite CSS Compiler</label>
...
</div>
<div>
<fieldset>
<legend class="large-label">Are you familiar with CSS Grid?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Yes</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">No</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Receive our newsletter?</label>
</div>
...
</form>
...
Salva queste aggiunte in index.html, quindi apri styles.css nel tuo editor di testo.
In styles.css, aggiungi un selettore di classe .large-label e aggiungi le seguenti proprietà come evidenziato nel seguente blocco di codice:
Questi stili impostano gli elementi large-label per essere grandi e in grassetto con una dimensione del carattere di 1.5rem, che equivale a 24px. Quindi la proprietà margin-bottom fornisce uno spazio tra l’etichetta e i suoi corrispondenti.
Salva questa modifica in styles.css e apri index.html nel tuo browser web. Il testo dell’etichetta sopra il campo di inserimento dati sarà grande e in grassetto, come renderizzato nell’immagine seguente:
Torna su styles.css e crea un altro selettore di classe per .small-label. Poiché queste sono le etichette che si trovano alla destra di un pulsante di opzione o di una casella di controllo, avranno bisogno di stili di spaziatura e dimensionamento diversi rispetto a .large-label. Aggiungi il CSS evidenziato al tuo styles.css dal seguente blocco di codice:
Il vertical-align: middle compenserà leggermente il testo. Il carattere è impostato su 1.25rem, equivalente a 20px, con il font sans-serif. Le proprietà margin a sinistra e a destra forniscono spazio tra i campi di input e l’etichetta.
Salva i tuoi aggiornamenti nel file styles.css e ricarica index.html nel browser. Le etichette accanto ai pulsanti radio e alla casella di controllo sono ora più grandi e forniscono più spaziatura, come mostrato nell’immagine seguente:
In questa sezione, hai creato stili per due tipi di etichette diversi in base alla loro posizione rispetto al valore di input. Le etichette ora risaltano, offrendo una maggiore leggibilità e navigazione all’interno del modulo. Nella prossima sezione, fornirai un esempio di formattazione dei dati utilizzando l’attributo placeholder.
Fornire Contenuto Placeholder con il Pseudo-Elemento ::placeholder
Il contenuto placeholder su un elemento input o textarea fornisce agli utenti del modulo una dimostrazione visiva del tipo di informazioni richieste e del modo per formattarle. L’attributo placeholder viene aggiunto all’HTML con un valore descrittivo. Successivamente, il pseudo-elemento ::placeholder consente di personalizzare l’aspetto del testo.
Per iniziare a creare contenuti di esempio, apri index.html nel tuo editor di testo. Aggiungi un attributo placeholder ai campi di testo del nome <input />, dell’email <input />, e agli elementi <textarea>. L’HTML evidenziato nel seguente blocco di codice indica dove aggiungere il placeholder e il valore da utilizzare:
Salva le tue modifiche su index.html, quindi apri la pagina in un browser web. Questi tre campi di inserimento testo ora contengono del testo al loro interno. Una volta selezionati questi campi di inserimento testo e aggiunto del contenuto, il testo del placeholder verrà rimosso dal browser. L’immagine seguente illustra come appaiono i CSS predefiniti del placeholder nel browser:
Per stilizzare il placeholder, apri styles.css nel tuo editor di testo. Aggiungi un selettore di gruppo per input::placeholder e textarea::placeholder. Assicurati di utilizzare doppi due punti tra il selettore e il pseudo-elemento, poiché così il browser riconosce la differenza tra una pseudo-classe e un pseudo-elemento. L’CSS evidenziato nel seguente blocco di codice mostra come è scritto:
Una cosa da notare è che Firefox richiede un valore di opacity impostato su 1 per avere il valore di colore completo. Altrimenti, Firefox riduce l’opacity, attenuando il colore del testo e causando problemi di contrasto colore accessibile a seconda del valore del colore. Poiché si tratta di una situazione solo per Firefox, c’è un commento che spiega lo scopo della presenza della proprietà opacity.
Salva le tue modifiche a styles.css e torna al browser per aggiornare index.html. Il testo segnaposto ora ha lo stesso colore blu usato per la freccia a discesa e gli stati selezionati per il pulsante radio e la casella di controllo. L’immagine seguente illustra come il browser rende il contenuto del placeholder:
Con questa sezione, hai creato il contenuto del placeholder nei campi di inserimento del testo e li hai stilizzati con l’uso del pseudo-elemento ::placeholder. Nella prossima sezione, creerai stili personalizzati per gli elementi del modulo <button>.
Creazione di stili interattivi per i pulsanti
Nelle form web, gli elementi <button> sono spesso utilizzati per inviare o azzerare un modulo. In index.html, ci sono due pulsanti, uno con un type di submit e l’altro di reset. Entrambi sono utili dal punto di vista funzionale, ma eseguono azioni opposte. Il pulsante submit invierà il modulo a un processore, mentre il pulsante reset cancella tutti i dati inseriti nel modulo. A causa di queste diverse azioni, gli elementi <button> devono apparire visibilmente diversi anche.
Per iniziare, apri styles.css nel tuo editor di testo e crea un selettore per l’elemento button. In questo blocco selettore, aggiungerai gli stili che sono condivisi tra gli elementi submit e reset <button>, come evidenziato nel seguente blocco di codice:
Il font imposta entrambi i pulsanti allo stesso stile di carattere e dimensione. Poi il border-radius aggiunge un angolo arrotondato ad entrambi i pulsanti. La proprietà cursor cambia lo stile del cursore per essere il puntatore con forma di mano. Infine, la proprietà padding definisce lo spazio intorno all’interno del pulsante.
Salva le tue modifiche su styles.css e poi apri index.html nel tuo browser web. Il testo nel pulsante aumenterà e lo spazio tra il testo aumenterà visivamente a causa del padding. L’immagine seguente mostra come i pulsanti vengono renderizzati nel browser:
Successivamente, torna su styles.css per aggiungere stili per ogni tipo di pulsante utilizzando un selettore di attributo mirato a ciascuno. Per il pulsante submit, aggiungi un background-color blu e un colore del testo bianco. Il pulsante reset acquisirà un sottolineatura simile a un link e un margin per aggiungere più spazio tra i pulsanti. Aggiungi il CSS evidenziato nel seguente blocco di codice al tuo file styles.css:
Salva queste aggiunte su styles.css quindi aggiorna index.html nel tuo editor di testo. Il pulsante submit è ora in blu e bianco evidente, mentre il reset è testo sottolineato più sobrio, come visualizzato nell’immagine seguente:
L’elemento <button> non ha uno stato :hover di default, quindi adesso aggiungerai questo al tuo stile. Uno stato :hover è utile per aiutare gli utenti del cursore ad avere un feedback visivo che il cursore è posizionato sui pulsanti.
Per creare gli stati :hover per questi elementi <button>, torna a styles.css nel tuo editor di testo. Imposta il backgound-color del pulsante submit per scurirsi al passaggio del mouse. Quindi, fai in modo che il pulsante reset elimini il sottolineatura quando viene passato sopra. L’HTML evidenziato nel seguente blocco di codice indica come scrivere questi stili:
Salva le modifiche a styles.css e poi torna al browser per aggiornare index.html. Come mostra l’animazione seguente, gli elementi <button> cambiano stile quando il cursore del mouse si posiziona su di essi:
In questa sezione, hai creato stili per gli elementi <button> in modo da renderne visibilmente diverse le differenze. Hai modificato come appare il cursore al passaggio del mouse regolando la proprietà cursor. Hai anche creato stili personalizzati da applicare a ciascun pulsante per fornire ulteriori feedback visivi. Nell’ultima sezione, fornirai ulteriori feedback visivi di attività creando stili quando un elemento del modulo è attualmente in uso con la pseudo-classe :focus.
Chiarendo i Campi del Modulo Attivi Con :focus
Quando si compilano un modulo, è importante che l’utente sappia su quale campo sta lavorando. È possibile realizzare questo con l’uso della pseudo-classe :focus. Per impostazione predefinita, i browser utilizzano una proprietà outline per indicare quando un elemento ha il :focus, ma a volte potrebbe non essere un indicatore evidente, o potrebbe contrastare con altri aspetti visivi del design. In questa sezione, creerai uno stato :focus personalizzato che corrisponda all’estetica del tuo modulo.
Per iniziare a lavorare con gli stati :focus dei campi del modulo, apri styles.css nel tuo editor di testo. Crea un selettore di gruppo per input, select e textarea, tutti con una pseudo-classe :focus, come evidenziato nel seguente blocco di codice:
Questi stili rimuovono il valore predefinito outline del browser e sostituiscono lo stile con un tratto blu spesso creato con la proprietà box-shadow. I primi tre valori dell’ombra sono per il posizionamento e l’entità dello sfocato. Il quarto è chiamato spread, che in questo caso crea un tratto 4px intorno all’elemento focalizzato.
Successivamente, i pulsanti riceveranno uno stato di focus leggermente diverso, poiché il pulsante submit è dello stesso colore blu. Lo scopo e l’intento di uno stato di focus è attirare l’attenzione evidente sull’elemento focalizzato, quindi distinguerai questi contorni in modi diversi.
Aggiungi un selettore button:focus a styles.css. Nel blocco del selettore, disabilita il valore predefinito di outline e aggiungi una proprietà box-shadow. I valori di posizione, sfocatura e diffusione rimarranno gli stessi dei campi di inserimento, ma il colore sarà nero invece di blu, come evidenziato nel seguente blocco di codice:
Salva le modifiche a styles.css e torna al tuo browser. Aggiorna index.html e inizia a premere il tasto Tab per far passare il focus tra ogni elemento nel modulo. L’animazione seguente mostra come lo stile del focus viene applicato mentre il focus cambia con il tasto Tab:
In questa sezione, hai creato stili per lo stato di focus che forniscono un chiaro feedback visivo quando un elemento del modulo ha il focus. Questo styling visivo è utile per gli utenti che utilizzano il mouse, il touch e la tastiera.
Conclusioni
I moduli sono un elemento comune del design web. Consentono agli utenti di interagire con le app, cercare contenuti e fornire feedback. In questo tutorial, hai creato e stilizzato un modulo completo. Hai rimosso gli stili predefiniti del browser con la proprietà appearance e creato un nuovo estetico personalizzato su vari elementi. Hai utilizzato la pseudoclasse :checked per creare stati selezionati per i pulsanti radio e le caselle di controllo. Successivamente hai aggiunto contenuti di placeholder e abbinato lo stile con il pseudoelemento ::placeholder. Dopo aver creato stili personalizzati per i pulsanti, hai applicato stili :focus fornendo preziosi feedback visivi di interazione agli utenti del modulo.
Se desideri leggere altri tutorial CSS, prova gli altri tutorial della serie Come Stilizzare HTML con CSS.
Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css