:focus-within CSS | Дизайн интерактивных форм

Введение

В этом практическом занятии мы изучим псевдо-класс :focus-within в CSS, который позволяет применять стили к родительскому элементу, когда какой-либо из его дочерних элементов имеет фокус. Мы будем использовать эту функцию для создания привлекательной формы, которая изменяет свой внешний вид при взаимодействии с ней пользователя. В ходе этого практического занятия вы лучше поймете, как улучшить пользовательский опыт с помощью CSS для создания интерактивных форм.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") subgraph Lab Skills css/selectors -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} css/colors -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} css/margin_and_padding -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} css/borders -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} css/width_and_height -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} css/display_property -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} css/backgrounds -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} css/pseudo_classes -.-> lab-35201{{"Улучшение интерактивности форм с использованием:focus-within CSS"}} end

Фокус внутри

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.