Селекторы, часть 1 / Псевдокласс :focus [15/18]
×

Псевдокласс :focus [15/18]

Псевдокласс :focus позволяет выбрать элемент, который в данный момент в фокусе. Например, текстовое поле, в которое установлен курсор, находится в фокусе.

В фокусе могут быть не только текстовые поля. Если вы переключаетесь между элементами веб-страницы с помощью клавиши tab, то в фокус будут попадать ссылки.

Пример использования псевдокласса:

input:focus {
  /* стили для поля в фокусе */
}

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдокласс :focus</title> <link rel="stylesheet" href="/assets/course7/course-5.css"> </head> <body> <form class="login" action="https://echo.htmlacademy.ru" method="post"> <label for="login">Логин</label> <input type="text" id="login" name="login"> <label for="password">Пароль</label> <input type="password" id="password" name="password"> <input type="submit" value="Войти"> </form> </body> </html>
CSS
form input:focus { }
HTML Academy

Подсветим поля в фокусе.

  1. В CSS-правило с селектором form input:focus добавьте свойство border-color: #0088cc;.

Щёлкните мышью внутри любого поля для проверки работы селекторов.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.