:checked :disabled og pseudo-klasser for formularstatus
Style formularelementer ud fra deres interaktive tilstande, f.eks. checked, disabled og required.
:checked :disabled og pseudo-klasser for formularstatus er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Oversigt over pseudoklasser for formularers tilstande
CSS indeholder pseudoklasser, der afspejler tilstandene for HTML-formularelementer. De gør det muligt at formatere formularfelter udelukkende med CSS uden JavaScript.
:checked
:checked gælder for afkrydsningsfelter og radioknapper, når de er valgt, samt for <option>-elementer i select-felter, når de er valgt.
<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 til brugerdefinerede afkrydsningsfelter
:checked-tricket: Skjul det indbyggede inputfelt, og formatér en brugerdefineret boks ved hjælp af vælgeren for det tilstødende søskendeelement, som udløses af :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled og :enabled
:disabled vælger formularelementer med attributten disabled. :enabled vælger elementer, som brugeren kan interagere med.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required og :optional
:required vælger inputfelter med attributten required. :optional vælger inputfelter uden den.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid og :invalid
:valid og :invalid afspejler browserens indbyggede valideringstilstand for formularer baseret på type, mønster, min/max og påkrævede begrænsninger.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid og :user-invalid
Browserens validering kører straks ved indlæsning af siden, selv før brugeren har interageret med den. :user-valid og :user-invalid gælder først efter at brugeren har interageret med feltet — det giver en langt bedre brugeroplevelse.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown gælder, når et inputfelt viser sin pladsholdertekst — det vil sige, at feltet er tomt. Brug den til at registrere tomme inputfelter uden JavaScript.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only og :read-write
:read-only vælger inputfelter med attributten readonly. :read-write vælger redigerbare inputfelter.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate gælder for afkrydsningsfelter i en mellemtilstand (hverken markeret eller ikke markeret — indstillet via JavaScript) og for radioknapper, når der ikke er valgt noget i gruppen.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range og :out-of-range
For inputfelter med type="number" eller type="range" og min/max afspejler :in-range og :out-of-range den aktuelle værdis gyldighed i forhold til disse grænser.
<input type="number" min="1" max="10" value="15" />
Hurtigt tjek
Hvilken pseudoklasse anvender valideringsstilregler for formularer først efter at brugeren har interageret med et inputfelt?
Opsummering
CSS-pseudoklasser for formulartilstande afspejler indbygget validering og interaktionstilstand for formularer uden JavaScript: :checked, :disabled, :required, :valid, :invalid og flere. Foretræk :user-invalid frem for :invalid for at give en bedre brugeroplevelse. Brug :placeholder-shown til at registrere tomme felter.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “:checked :disabled og pseudo-klasser for formularstatus” gratis?
Ja — hele teksten til “:checked :disabled og pseudo-klasser for formularstatus” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “:checked :disabled og pseudo-klasser for formularstatus”?
Style formularelementer ud fra deres interaktive tilstande, f.eks. checked, disabled og required. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “:checked :disabled og pseudo-klasser for formularstatus”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- :hover :focus :active og :visited
- :nth-child og :nth-of-type
- :not() :is() og :where()
- :checked :disabled og pseudo-klasser for formularstatus