Usability of a website or application can make-or-break it. An application that is difficult to use, no matter how powerful, will often be abandoned by all but the most stubborn of users.
Similarly, a website or application that has amazing usability and provides a great user experience, will often be more highly adapted and used than a competing site/app that is more powerful but lacks in usability. Due to that, it is obviously highly important for you to put a lot of effort and focus on giving the users of the app/site the best experience possible.
The focus-within pseudo selector is one of those properties that helps us to increase usability and enhance the experience of the users of our app or site.
focus-within allows you to select the parent or ancestor of any item that is focused upon. That's right, this selector, unlike most others selectors allows you to select an ancestor! That's fantastic and opens up many creative opportunities for us.
The Code
HTML
<body>
<form>
<div class="field-group">
<label for="profilePicture">
Profile Picture Url
</label>
<input type="url" name="profilePicture">
</div>
<div class="field-group">
<label for="coverImage">
Cover Image URL
</label>
<input type="url" name="coverImage">
</div>
<div class="field-group">
<label for="displayName">
Display Name
</label>
<input type="text" name="displayName">
</div>
<div class="field-group">
<label for="about">
About
</label>
<input type="text" name="about">
</div>
<div class="field-group">
<label for="location">
Location
</label>
<input type="text" name="location">
</div>
<div class="field-group">
<label for="website">
Website
</label>
<input type="url" name="website">
</div>
</form>
</body>
CSS
form{
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
}
.field-group{
width: 100%;
float: left;
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
}
label{
width: 100%;
float: left;
margin-bottom: 5px;
}
input{
float: left;
width: 100%;
padding: 10px 5px;
border-radius: 3px;
box-sizing: border-box;
}
form:focus-within {
background: #ccc;
}
.field-group:focus-within {
background: #333;
color: #fff;
}
You can essentially ignore most of the CSS That was just put there so the demo did not look completely awful. The only important parts here are the last few lines where we see the :focus-within selector.
As you can see we set the background of the form to be a light grey when any of it's children are focused upon. At the same time, we also set the specific field-group to also change background to a dark grey with white text when any of it's children are selected.
The Result is this:
Before Focus
After Focus
As I'm sure you've already decided, this small little change has increased usability and the user experience quite a bit even for this short form. Start using it today in your websites and apps!
Browser Support
The :focus-within selector is supported in the following browsers:
- Firefox 54+
- Chrome 60+
- Safari 10.1+
- Opera 47+
- iOS Safari 10.3+
- Chrome for Android 59+