Эффекты фокуса
Часть раздела Мастерство CSS путешествия по HTML на Coddy. Урок 9 из 43.
Псевдокласс :focus позволяет стилизовать элемент, когда он получает фокус, например при нажатии на него или переходе к нему с помощью клавиши Tab. Это отличный способ выделить элемент, с которым вы взаимодействуете! Например:
<input type="text">Стилизуйте input, когда он получает фокус:
input {
border: 2px solid #ccc;
}
input:focus {
border-color: #4285f4;
box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}Когда пользователь щёлкнет по этому полю ввода или перейдёт к нему с помощью Tab, цвет border изменится на blue, а вокруг него появится едва заметная синяя тень.
Задание
ЛегкоСоздайте правило CSS, которое применяет специальное оформление к текстовому полю input, когда оно получает focus.
- При focus изменяет border на оранжевый rgb(255, 152, 0)
- При focus добавляет жёлтый background color rgb(255, 243, 224)
Попробуйте сами
<!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>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Мастерство CSS
1Мастерство селекторов — Комбинации
ВведениеСелектор потомковДочерний селекторСмежный селекторОбщий родственный селекторИтоговое испытание4Проект: Выпадающее меню
Добавление подменюОтображение подменюДополнительная стилизацияПоле ввода и кнопка2Интерактивные псевдоклассы
ПсевдоклассыЭффекты наведенияЭффекты фокусаАктивные стилиИтоговое испытаниеПотренируйтесь самостоятельно: Песочница Web