HTML-CSS: Focus Within

Last update on March 08 2024 13:35:29 (UTC/GMT +8 hours)

HTML-CSS : Exercise-19 with Solution

Using HTML, CSS changes the appearance of a form if any of its children are focused.

Use the pseudo-class :focus-within to apply styles to a parent element if any child element gets focused.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS changes the appearance of a form if any of its children are focused</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<form><!-- Comment: Defines a form element -->
<label for="username">Username:</label><!-- Comment: Defines a label for the username input field -->
<input id="username" type="text" /><!-- Comment: Defines an input field for entering the username -->
<br /><!-- Comment: Inserts a line break -->
<label for="password">Password:</label><!-- Comment: Defines a label for the password input field -->
<input id="password" type="text" /><!-- Comment: Defines an input field for entering the password -->
</form><!-- Comment: End of the form -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple form with two input fields: one for entering a username and another for entering a password.
Each input field is accompanied by a label for better accessibility.
The labels are associated with the input fields using the for attribute, which matches the id of the input field.
A <br> element is used to add a line break between the two input fields for better visual separation.
The structure follows best practices, with proper indentation and comments for clarity.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
form {
  border: 2px solid #CCBC82; /* Comment: Sets the border style for the form */
  padding: 8px; /* Comment: Adds padding inside the form */
  border-radius: 2px; /* Comment: Sets the border radius to create rounded corners for the form */
}

form:focus-within {
  background: #7CF0BD; /* Comment: Changes the background color of the form when it or its children are focused */
}

label {
  display: inline-block; /* Comment: Displays labels as blocks, allowing them to have width and height properties */
  width: 72px; /* Comment: Sets the width of the labels */
}

input {
  margin: 4px 12px; /* Comment: Sets margin for the input fields */
}
</style> /* Comment: End of the CSS styling */

Explanation:

The CSS code styles the HTML form and its elements.
form styles the form element itself, setting properties like border, padding, and border radius to give it a distinct appearance.
form:focus-within changes the background color of the form when it or its children are focused.
label styles the label elements associated with the form inputs, making them display as inline-blocks with a fixed width.
input styles the input fields, setting margins to control spacing around them.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.