CSS : селектор фокуса
Пример
Выберите и настройте поле ввода, когда оно получит фокус:
input:focus
{
background-color: yellow;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Селектор :focus
используется для выбора элемента, находящегося в фокусе.
Совет : Селектор :focus разрешен для элементов, которые принимают события клавиатуры или другие действия пользователя.
Версия: | CSS2 |
---|
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает селектор.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Синтаксис CSS
:focus {
css declarations;
}
Дополнительные примеры
Пример
Когда <input type="text"> получит фокус, постепенно измените ширину со 100 до 250 пикселей:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Связанные страницы
Учебное пособие по CSS: псевдоклассы CSS