CSS : focuskiezer
Voorbeeld
Selecteer en stijl een invoerveld wanneer het focus krijgt:
input:focus
{
background-color: yellow;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De :focus
selector wordt gebruikt om het element met focus te selecteren.
Tip: De :focus-selector is toegestaan op elementen die toetsenbordgebeurtenissen of andere gebruikersinvoer accepteren.
Versie: | CSS2 |
---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de selector volledig ondersteunt.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS-syntaxis
:focus {
css declarations;
}
Meer voorbeelden
Voorbeeld
Wanneer een <input type="text"> focus krijgt, verander dan geleidelijk de breedte van 100px in 250px:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-pseudoklassen