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;


}