CSS : selektor ostrości
Przykład
Wybierz i stylizuj pole wejściowe, gdy jest ono aktywne:
input:focus
{
background-color: yellow;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Selektor :focus
służy do wybierania elementu, który ma fokus.
Wskazówka: selektor :focus jest dozwolony na elementach, które akceptują zdarzenia klawiatury lub inne dane wprowadzane przez użytkownika.
Wersja: | CSS2 |
---|
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje selektor.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Składnia CSS
:focus {
css declarations;
}
Więcej przykładów
Przykład
Gdy <input type="text"> staje się aktywny, stopniowo zmieniaj szerokość ze 100px na 250px:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Powiązane strony
Samouczek CSS: CSS Pseudoklasy