Введение
В этом практическом занятии мы изучим псевдо-класс :focus-within в CSS, который позволяет применять стили к родительскому элементу, когда какой-либо из его дочерних элементов имеет фокус. Мы будем использовать эту функцию для создания привлекательной формы, которая изменяет свой внешний вид при взаимодействии с ней пользователя. В ходе этого практического занятия вы лучше поймете, как улучшить пользовательский опыт с помощью CSS для создания интерактивных форм.
Фокус внутри
В ВМ уже предоставлены index.html и style.css.
Для изменения внешнего вида формы, когда какой-либо из ее дочерних элементов имеет фокус, используйте псевдо-класс :focus-within для применения стилей к родительскому элементу. Например, в данном HTML-коде, если какой-либо из полей ввода имеет фокус, элемент form будет иметь зеленый фон. Для применения стилей к дочерним элементам используйте соответствующие селекторы CSS, такие как label и input.
<form>
<label for="username">Username:</label>
<input id="username" type="text" />
<br />
<label for="password">Password:</label>
<input id="password" type="text" />
</form>
form {
border: 2px solid #52b882;
padding: 8px;
border-radius: 2px;
}
form:focus-within {
background: #7cf0bd;
}
label {
display: inline-block;
width: 72px;
}
input {
margin: 4px 12px;
}
Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Резюме
Поздравляем! Вы завершили практическое занятие Focus Within. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.