Эффекты фокуса

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 9 из 43.

Псевдокласс :focus позволяет стилизовать элемент, когда он получает фокус — например, когда вы нажимаете на него или переходите к нему с помощью клавиши Tab на клавиатуре. Это отличный способ выделить элемент, с которым вы взаимодействуете! Например:

<input type="text">

Стилизуйте поле ввода при получении фокуса:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Когда пользователь нажимает на это поле ввода или переходит к нему с помощью клавиши Tab, цвет границы изменится на синий, и вокруг него появится едва заметная синяя тень.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Создайте CSS-правило, которое применяет специальное оформление к текстовому полю ввода при получении фокуса.

При фокусе меняет границу на оранжевую rgb(255, 152, 0)
При фокусе добавляет желтый цвет фона rgb(255, 243, 224)

Шпаргалка

Псевдокласс :focus стилизует элемент, когда он получает фокус (при нажатии или переходе с помощью клавиши Tab):

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Это изменяет цвет границы и добавляет тень, когда поле ввода находится в фокусе.

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.