Come applicare uno stile ai moduli con i CSS: una guida per principianti

Le app raccolgono dati principalmente tramite i moduli. Prendi un modulo di iscrizione generico, ad esempio: ci sono diversi campi in cui gli utenti possono inserire informazioni come nome, email, ecc.

Ai vecchi tempi, i siti web avevano solo semplici e noiosi moduli HTML con niente stili. Questo prima che CSS cambiasse tutto. Ora possiamo creare moduli più interessanti e vivaci utilizzando le ultime funzionalità dei CSS.

Non credermi sulla parola. Di seguito è riportato laspetto di un tipico modulo HTML senza CSS.

Ecco lo stesso modulo ravvivato da un po di CSS .

In questo tutorial, ti mostreremo come ricreare il modulo mostrato sopra e alcuni altri fantastici modifiche che puoi implementare per creare moduli visivamente impressionanti e di facile utilizzo.

Dimostreremo come applicare uno stile ai moduli con CSS in sei passaggi:

1. Impostazione di box-sizing
2. Selettori CSS per elementi di input
3. Metodi di stile di base per campi di input di testo
4. Applicazione di stili ad altri tipi di input
5. Pseudo-classi dellinterfaccia utente
6. Input non personalizzabili

Prima di immergerci, è importante capire che non esiste uno stile specifico per i moduli. Le possibilità sono limitate solo dalla tua immaginazione. Questa guida ha lo scopo di aiutarti a iniziare il percorso verso la creazione di design unici con CSS.

Cominciamo!

Impostazione del dimensionamento della scatola

Di solito imposto * {box-sizing:border-box;} non solo per i moduli, ma anche per le pagine web. Quando lo imposti, la larghezza di tutti gli elementi conterrà il riempimento.

Ad esempio, imposta la larghezza e il riempimento come segue.

.some-class { width:200px; padding:20px;}

Il .some-class senza box-sizing:border-box avrà una larghezza maggiore di 200px, che può essere un problema. Ecco perché la maggior parte degli sviluppatori utilizza border-box per tutti gli elementi.

Di seguito è riportata una versione migliore del codice. Supporta anche gli :before e :after pseudo-elementi.

*, *:before, *:after { box-sizing: border-box;}

Suggerimento: il selettore * seleziona tutti gli elementi nel documento.

Selettori CSS per elementi di input

Il modo più semplice per selezionare elementi di input consiste nellusare selettori di attributi CSS.

Questi selettori selezioneranno tutti gli elementi di input nel documento. Se devi specificare dei selettori, dovrai aggiungere classi agli elementi.

<input type="text" class="signup-text-input" />

Quindi:

.signup-text-input { // styles here}

Metodi di stile di base per campi di input di testo a riga singola

I campi a riga singola sono i campi di input più comuni utilizzati nei moduli. Di solito, un input di testo a riga singola è una semplice casella con un bordo (questo dipende dal browser).

Ecco il markup HTML per un campo a riga singola con un segnaposto.

<input type="text" placeholder="Name" />

Sarà simile a questo:

Puoi utilizzare quanto segue Proprietà CSS per rendere più attraente questo campo di input.

• Padding (per aggiungere spaziatura interna)
• Margine (per aggiungere un margine attorno al campo di input)
• Bordo
• Ombra riquadro
• Raggio del bordo
• Larghezza
• Carattere

Ingrandiamo in ciascuna di queste proprietà.

Padding

Laggiunta di uno spazio interno al campo di input può aiutare a migliorare la chiarezza. Puoi farlo con la proprietà padding.

input { padding: 10px;}

Margine

Se sono presenti altri elementi vicino al campo di immissione, potresti aggiungere un margine attorno ad esso per evitare il raggruppamento.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Bordo

Nella maggior parte dei browser, i campi di immissione del testo hanno bordi che puoi personalizzare.

.border-customized-input { border: 2px solid #eee;}

Puoi anche rimuovere del tutto un bordo.

.border-removed-input { border: 0;}

Suggerimento: assicurati per aggiungere un colore di sfondo o box-shadow quando il bordo viene rimosso. In caso contrario, gli utenti non vedranno linput.

Alcuni web designer preferiscono visualizzare solo il bordo inferiore perché sembra un po come scrivere su una riga in un taccuino.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Box shadow

Puoi utilizzare la proprietà CSS box-shadow per aggiungere unombra esterna. Puoi ottenere una serie di effetti giocando con i cinque valori della proprietà.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Raggio del bordo

La proprietà border-radius può avere un impatto enorme sulla sensazione dei tuoi moduli. Curvando i bordi delle caselle, è possibile modificare in modo significativo laspetto dei campi di input.

.rounded-input { padding:10px; border-radius:10px;}

Puoi ottenere un aspetto completamente diverso utilizzando box-shadow e border-radius insieme.

Larghezza

Utilizza la proprietà width per imposta la larghezza degli input.

input { width:100%;}

Caratteri

La maggior parte dei browser utilizza una famiglia di caratteri e una dimensione diversa per gli elementi del modulo. Se necessario, possiamo ereditare il carattere dal documento.

input, textarea { font-family:inherit; font-size: inherit;}

Applicazione di stili ad altri tipi di input

Puoi definire altri tipi di input come area di testo, pulsante di opzione, casella di controllo e altro. Diamo unocchiata più da vicino.

Aree di testo

Le aree di testo sono simili agli input di testo tranne per il fatto che consentono input su più righe. In genere li utilizzeresti quando desideri raccogliere dati di formato più lungo dagli utenti, come commenti, messaggi, ecc. Puoi utilizzare tutte le proprietà CSS di base di cui abbiamo discusso in precedenza per definire gli stili delle aree di testo.

Anche la proprietà resize è molto utile nelle aree di testo. Nella maggior parte dei browser, le aree di testo sono ridimensionabili lungo entrambi gli assi xey (valore: both) per impostazione predefinita. Puoi impostarlo su both, horizontal o vertical.

Dai unocchiata a questarea di testo che ho disegnato:

Guarda la penna
dyomzez di Supun Kavinda (@SupunKavinda)
su CodePen.

In questo esempio, ho utilizzato resize:vertical per consentire solo il ridimensionamento verticale. Questa pratica viene utilizzata nella maggior parte dei moduli perché impedisce fastidiose barre di scorrimento orizzontali.

Nota: se è necessario creare aree di testo con ridimensionamento automatico, sarà necessario utilizzare un approccio JavaScript, che esula dallambito di questo articolo.

Caselle di controllo e pulsanti di opzione

La casella di controllo predefinita e i pulsanti di opzione sono difficili da definire e richiedono CSS (e HTML) più complessi.

Per applicare lo stile una casella di controllo, utilizza il seguente codice HTML.

<label>Name <input type="checkbox" /> <span></span></label>

Alcune cose da notare:

• Dato che stiamo usando <label> per racchiudere <input>, se fai clic su qualsiasi elemento allinterno di <``label``>, <input> verrà cliccato
• Nasconderemo <input> perché i browser non ci consentono di modificarlo molto
• <span> crea una casella di controllo personalizzata
• Useremo il selettore di pseudo-classe input:checked per ottenere lo stato selezionato e lo stile della casella di controllo personalizzata

Ecco una casella di controllo personalizzata (vedi i commenti nel CSS per ulteriori spiegazioni):

Vedi la penna
yLNKQBo di Supun Kavinda ( @SupunKavinda)
su CodePen.

Ecco un pulsante di opzione personalizzato:

Guarda la penna
eYNMQNM di Supun Kavinda (@SupunKavinda)
su CodePen.

Abbiamo utilizzato lo stesso concetto (input:checked) per creare elementi personalizzati in entrambi gli esempi.

Nei browser, le caselle di controllo sono a forma di scatola mentre i pulsanti di opzione sono rotondi. È meglio mantenere questa convenzione negli input personalizzati per evitare di confondere lutente.

Seleziona menu

Seleziona menu consente agli utenti di selezionare un elemento tra più scelte.

Puoi applicare uno stile allelemento <select> per renderlo più accattivante.

select { width: 100%; padding:10px; border-radius:10px;}

Tuttavia, non è possibile applicare uno stile al menu a discesa (o agli elementi <option>) perché lo stile è predefinito a seconda del sistema operativo. Lunico modo per definire lo stile di questi elementi è utilizzare elenchi a discesa personalizzati con JavaScript.

Pulsanti

Come la maggior parte degli elementi, i pulsanti hanno stili predefiniti.

<button>Click Me</button>

Aggiungiamo un po di pepe.

Pseudo-classi dellinterfaccia utente

Di seguito sono riportate alcune pseudo-classi dellinterfaccia utente comunemente utilizzate con gli elementi del modulo.

Queste possono essere utilizzate per mostrare avvisi in base agli attributi di un elemento:

• :required
• :valid e :invalid
• :checked (abbiamo già usato questo)

Questi possono essere usati per creare effetti su ogni stato:

• :hover
• :focus
• :active

Messaggi generati con: obbligatorio

Per mostrare un messaggio che è richiesto un input:

Se rimuovi con JavaScript, il messaggio "Required" verrà rimosso automaticamente.

Possiamo fare la stessa cosa con :valid e :invalid pseudo-classi.

: hover and: focus

:hover seleziona un elemento quando il puntatore del mouse passa sopra di esso. :focus seleziona un elemento quando è focalizzato.

Queste pseudo-classi sono spesso utilizzate per creare transizioni e lievi cambiamenti visivi. Ad esempio, puoi modificare la larghezza, il colore di sfondo, il colore del bordo, lintensità dellombra, ecc.Lutilizzo della proprietà transition con queste proprietà rende queste modifiche molto più agevoli.

Di seguito sono riportati alcuni effetti di passaggio del mouse sugli elementi del modulo (prova a passare il mouse sugli elementi).

Visualizza la penna
yLNKZqg di Supun Kavinda (@SupunKavinda)
su CodePen.

Quando gli utenti vedono gli elementi cambiano leggermente quando passano il mouse sopra di loro, hanno la sensazione che lelemento sia utilizzabile. Questa è una considerazione importante quando si progettano gli elementi del modulo.

Hai notato che (in alcuni browser) appare un contorno blu quando ci si concentra sugli elementi del modulo? Puoi usare la :focus pseudo-classe per rimuoverla e aggiungere più effetti quando lelemento è focalizzato.

Il codice seguente rimuove la struttura del focus per tutti gli elementi.

*:focus {outline:none !important}

Per aggiungere uno schema di focus:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Hai visto input di ricerca che scala quando focalizzato? Prova questo input.

Visualizza la penna
KKpoJJa di Supun Kavinda (@SupunKavinda)
su CodePen.

Input non personalizzabili

Lo stile degli elementi del modulo è stato storicamente un compito arduo. Ci sono alcuni elementi del modulo che non abbiamo molto controllo sullo stile. Ad esempio:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Questi elementi sono forniti dal browser e disegnati in base al sistema operativo. Lunico modo per definire lo stile di questi elementi è utilizzare controlli personalizzati, che vengono creati utilizzando elementi HTML personalizzabili come div, span e così via.

Ad esempio, quando si applica lo stile a <input type="file">, è possibile nascondere linput predefinito e utilizzare un pulsante personalizzato.

I controlli personalizzati per gli elementi del modulo sono sviluppato per la maggior parte delle principali librerie JavaScript. Puoi trovarli su GitHub.

Conclusione

Ora dovresti capire come modellare elementi semplici del modulo e come usare i controlli personalizzati quando i campi di input del browser sono difficili da definire. Come ho affermato allinizio di questo post, questi sono solo i mattoni di base dello stile dei moduli CSS. Dovresti utilizzare questi suggerimenti come base per scatenare la tua immaginazione.

Come suggerimento finale, ricorda di rendere reattivi tutti i tuoi moduli.

Cerchi più ispirazione per la progettazione dei moduli? Dai unocchiata a questa raccolta CodePen.