HTML-CSS: Focus Within
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:
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:
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.
Go to:
PREV : Input with prefix.
NEXT : Custom scrollbar.
HTML-CSS Editor:
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.