Accentsconagua
Share
Vi siete mai chiesti come stile caselle di controllo e pulsanti di opzione, ma senza JavaScript? Grazie a CSS3 puoi! Ecco cosa costruiremo (Nota: per imparare a renderli accessibili, guarda anche questo tutorial):
Se stai cercando alcuni elementi grafici da utilizzare con gli elementi dell'interfaccia utente del modulo, dai un'occhiata ai kit dell'interfaccia utente disponibili da Envato Elements. Altrimenti, prendi una tazza di caffè e inizia con questo tutorial!
Lettura consigliata: I 30 selettori CSS che devi memorizzare
Per quelli di voi che si sentono già sicuri nelle proprie capacità CSS e vogliono solo una piccola spinta nella giusta direzione, ecco la linea più importante di CSS nell'intero tutorial:
input [type = "checkbox"]: checked + label
Ora, per quelli di voi che sentono che potrebbe aver bisogno di più direzione, non temere, continuate a leggere!
Bene, quindi torna su argomento ora. Cosa faremo esattamente? Bene, a causa del piccolo nifty di CSS3 : selezionata pseudo-selettore, siamo in grado di indirizzare un elemento in base al suo stato selezionato (o non selezionato). Possiamo quindi usare il + selettore fratello adiacente da CSS2.1 per indirizzare l'elemento direttamente seguendo la casella di controllo o la radio, che nel nostro caso è l'etichetta.
Ora iniziamo creando i nostri file HTML e CSS (o comunque preferisci gestire i tuoi stili) e mettiti al lavoro. Immagino che tu sappia come farlo, quindi non dovremo farlo.
Allo scopo di farti strada, mostrerò questa tecnica solo su una casella di controllo, ma il processo per i pulsanti radio è identico ed è incluso nella fonte.
Ok, iniziamo allora, vero? Iniziamo creando il nostro input di checkbox, seguito da un'etichetta.
Ora, nel caso in cui tu non ne sappia molto elemento, devi collegare l'input e l'etichetta per poter interagire con l'input attraverso l'etichetta. Questo è fatto usando, per = "" e l'ID di input.
Inoltre aggiungerò a all'interno dell'etichetta, che è una preferenza più personale di qualsiasi altra cosa, ma tutto diventerà chiaro al punto 3.
È qui che inizia il divertimento. La prima cosa che facciamo, che è la base di tutto questo tutorial, è nascondere la casella di controllo attuale.
input [type = "checkbox"] display: none;
Ora che è fatto, possiamo dare uno stile all'etichetta, ma più specificatamente lo span all'interno dell'etichetta. Lo faccio in questo modo per darmi più controllo sulla posizione esatta della casella di controllo. Senza di esso probabilmente useresti direttamente un'immagine di sfondo nell'etichetta, e posizionarla potrebbe diventare difficile.
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; larghezza: 19px; altezza: 19px; background: url (check_radio_sheet.png) left top non ripetizione;
Va bene, lascia che ti spieghi rapidamente. Prima di tutto, nota lo sfondo. Ho un piccolo foglio di sprite per questi, quindi tutto quello che devo fare è impostare la posizione dello sfondo su questo intervallo. Lo span stesso è la larghezza e l'altezza esatte di ogni "sprite" nel foglio, facilitando la definizione di ogni stato.
Il nostro foglio di sprite Ecco il resto del CSS, specifico per il mio stile. Questo è puramente per l'estetica e specifico per i miei gusti o questo design.
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; larghezza: 19px; altezza: 19px; margine: -2px 10px 0 0; vertical-align: middle; background: url (check_radio_sheet.png) left top non ripetizione; cursor: pointer;
Non c'è ancora molto lavoro da fare, quindi portiamolo a termine. L'ultima cosa che devi fare è fornire uno stato per l'elemento quando l'input è controllato, e facoltativamente anche per il passaggio del mouse. Questo è abbastanza semplice, basta dare un'occhiata!
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; larghezza: 19px; altezza: 19px; margine: -2px 10px 0 0; vertical-align: middle; background: url (check_radio_sheet.png) left top non ripetizione; cursor: pointer; input [type = "checkbox"]: checked + label span background: url (check_radio_sheet.png) -19px top no-repeat;
Notare che poiché ho usato un foglio sprite, tutto ciò che devo fare è cambiare la posizione dello sfondo. Notate, inoltre, che tutto ciò che dovevo fare per definire lo span dell'etichetta per quando "spuntate" un checkbox / radio, era usare il CSS3 : selezionata pseudo selettore.
Gli pseudo selettori hanno un grande supporto su tutti i browser, ma si applicano i normali avvertimenti, e il fallback è piuttosto aggraziato:
Posso usare i dati per i pseudo selettori generali
Fallback: IE9 su Windows 7 Anche i primi browser mobili sono un problema: il supporto di : selezionata non è chiaro. Mobile Safari pre iOS 6 non lo fa supportalo, per esempio.
Bene, quindi abbiamo finito, giusto? Bene, ricontrolliamo. Prima l'HTML:
La tua è uguale? Non dimenticare di aggiungerlo ! Quando si sperimenta da solo, consiglio vivamente di trovare modi nuovi o diversi di fare questa parte. Mi piacerebbe vedere cosa ti viene in mente per renderlo più efficiente. Ora per il CSS:
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; larghezza: 19px; altezza: 19px; margine: -2px 10px 0 0; vertical-align: middle; background: url (check_radio_sheet.png) left top non ripetizione; cursor: pointer; input [type = "checkbox"]: checked + label span background: url (check_radio_sheet.png) -19px top no-repeat;
Tutto è presente? Perfezionare. Tieni presente che gran parte di questo stile è specifico dello stile che ho creato per i file demo. Ti incoraggio a crearne uno tuo e a sperimentare con il posizionamento e la presentazione.
In conclusione, la cosa più importante che potresti portare via è la primissima linea di CSS che ho scritto in cima:
input [type = "checkbox"]: checked + label
Usando questo, puoi creare un intero insieme di cose diverse. Le possibilità con : selezionata vai oltre le checkbox e le radio per l'uso nei moduli, ma ti lascerò a sperimentare da solo. Alcune cose da sperimentare:
Spero che questo breve articolo ti sia piaciuto e spero che tu prenda quello che vedi qui e lo espandi o lo migliori!
Per finire, abbiamo creato una guida completa per aiutarti ad imparare i CSS, sia che tu stia appena iniziando con le basi o che tu voglia esplorare CSS più avanzati.
