CSS Focus-Within | Interactive Form Design

Introduction

In this lab, we will explore the :focus-within pseudo-class in CSS, which allows us to apply styles to a parent element when any of its child elements are focused. We will use this feature to create a visually appealing form that changes its appearance when the user interacts with it. Through this lab, you will gain a better understanding of how to enhance the user experience by using CSS to create interactive forms.

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{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} css/colors -.-> lab-35201{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} css/margin_and_padding -.-> lab-35201{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} css/borders -.-> lab-35201{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} css/width_and_height -.-> lab-35201{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} css/display_property -.-> lab-35201{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} css/backgrounds -.-> lab-35201{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} css/pseudo_classes -.-> lab-35201{{"`Enhancing Form Interactivity with CSS Focus-Within`"}} end

Focus Within

index.html and style.css have already been provided in the VM.

To change the appearance of a form when any of its child elements are focused, use the pseudo-class :focus-within to apply styles to the parent element. For example, in the given HTML code, if any of the input fields are focused, the form element will have a green background. To apply styles to the child elements, use appropriate CSS selectors like label and 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;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Focus Within lab. You can practice more labs in LabEx to improve your skills.

Enhancing Form Interactivity with CSS Focus-Within

Introduction

Skills Graph

Focus Within

Summary

Other CSS Tutorials you may like