CSS selector input:focus

Селектор :focus використовується для вибірки елеметів, що потрапили у фокус. Елемент отримує фокус, коли ви встановлюєте курсор в поле введення. При цьому в полі з'являється мигаючий курсор.

Синтакс

:focus {

    css declarations;

}

Переглядачі

Переглядач
focus

4.0

8.0

2.0

3.1

9.6


Мобільних переглядачів ще не додано.

Приклади


Обирає елемент <input>, який є у фокусі, і визначає його стиль

input:focus { 

    background-color: yellow;

}

Коли <input type="text"> отримує фокус, його ширина поступово змінюється з 100px до 250px

input[type=text] {

    width: 100px;

    transition: ease-in-out, width .35s ease-in-out;

}



input[type=text]:focus {

    width: 250px;

}