:checked :disabled e pseudo-classi dello stato dei form
Definisca lo stile degli elementi dei form in base al loro stato interattivo, ad esempio checked, disabled e required.
:checked :disabled e pseudo-classi dello stato dei form è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Panoramica delle pseudo-classi dello stato dei moduli
Il CSS fornisce pseudo-classi che riflettono gli stati degli elementi dei moduli HTML. Consentono di applicare stili ai controlli dei moduli usando solo il CSS, senza JavaScript.
:checked
:checked si applica alle caselle di controllo e ai pulsanti radio quando sono selezionati, nonché agli elementi <option> all'interno degli elenchi select quando vengono scelti.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked per le caselle di controllo personalizzate
Il trucco di :checked: nasconda l'input nativo e applichi stili a una casella personalizzata utilizzando il selettore del fratello adiacente attivato da :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled e :enabled
:disabled seleziona gli elementi dei moduli con l'attributo disabled. :enabled seleziona gli elementi con cui è possibile interagire.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required e :optional
:required seleziona gli input con l'attributo required. :optional seleziona gli input che ne sono privi.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid e :invalid
:valid e :invalid riflettono lo stato della convalida nativa dei moduli del browser in base ai vincoli type, pattern, min/max e required.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid e :user-invalid
La convalida del browser viene eseguita immediatamente al caricamento della pagina, anche prima dell'interazione dell'utente. :user-valid e :user-invalid si applicano solo dopo che l'utente ha interagito con il campo: l'esperienza utente è molto migliore.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown si applica quando un input mostra il testo segnaposto, ovvero quando il campo è attualmente vuoto. Lo utilizzi per rilevare gli input vuoti senza JavaScript.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only e :read-write
:read-only seleziona gli input con l'attributo readonly. :read-write seleziona gli input modificabili.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate si applica alle caselle di controllo in uno stato intermedio (né selezionate né deselezionate, impostato tramite JavaScript) e ai pulsanti radio quando non è stata effettuata alcuna selezione nel gruppo.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range e :out-of-range
Per gli input type="number" o type="range" con min/max, :in-range e :out-of-range riflettono la validità del valore corrente rispetto a questi limiti.
<input type="number" min="1" max="10" value="15" />
Verifica rapida
Quale pseudo-classe applica gli stili di convalida del modulo solo dopo che l'utente ha interagito con un campo di input?
Riepilogo
Le pseudo-classi CSS dello stato dei moduli riflettono lo stato della convalida nativa e dell'interazione con i moduli senza JavaScript: :checked, :disabled, :required, :valid, :invalid e altre. Preferisca :user-invalid a :invalid per una migliore esperienza utente. Utilizzi :placeholder-shown per rilevare i campi vuoti.
Domande Frequenti
La lezione «:checked :disabled e pseudo-classi dello stato dei form» è gratuita?
Sì — il testo completo di «:checked :disabled e pseudo-classi dello stato dei form» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «:checked :disabled e pseudo-classi dello stato dei form»?
Definisca lo stile degli elementi dei form in base al loro stato interattivo, ad esempio checked, disabled e required. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «:checked :disabled e pseudo-classi dello stato dei form»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- :hover :focus :active e :visited
- :nth-child e :nth-of-type
- :not() :is() e :where()
- :checked :disabled e pseudo-classi dello stato dei form