loading...
Cover image for Why CSS :focus-within is amazing

Why CSS :focus-within is amazing

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・2 min read

This is not a :focus selector, which will highlight when you focus on an element.
But a selector to fire when something within is focussed.

In our case, we'll be focusing on forms (I see what you did there 😏)

The end result will look like this:

CSS focus-within selector

HTML Structure

As for our HTML, we wil create a form with 2 inputs.

<form>
  <label for="username">Username</label>
  <input type="text" name="username" />
  <br /><br />
   <label for="password">Password</label>
  <input type="password" name="username" />
</form>
Enter fullscreen mode Exit fullscreen mode

That's all we need for this specific demo.

CSS focus-within pseudo selector

The :focus-within is a pseudo-selector, like :before or :after.

Let's first add some basic styling.

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
form {
  border: 1px dashed #333;
  padding: 25px;
}
Enter fullscreen mode Exit fullscreen mode

This will make sure our form is absolutely centered on the page and has a small border to showcase our effect later on.

Now we want to draw the users attention to the form, but making it a fancy colour when they focus an input field.

form {
  border: 1px dashed #333;
  padding: 25px;
  transition: background 0.3s ease;
}
form:focus-within {
    background: #f4d35e;
}
Enter fullscreen mode Exit fullscreen mode

This will change the background of our form to yellow.

You can see this in this Codepen.

Making it more awesome

Yes, we can even make it more awesome by using a box-shadow hack we can create a kind of modal effect!

form {
  border: 1px dashed #333;
  padding: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
}
form:focus-within {
  background: #f4d35e;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
}
Enter fullscreen mode Exit fullscreen mode

We create a box-shadow that is 100% of the viewport biggest position (width or height). Initially, this will be at 0 opacity.

When we have a :focus-within we change the opacity to 70%.

The effect is a lightbox-like effect ✨.

Browser Support

The :focus-within selector actually has pretty good support, considering IE is dead already.

CSS focus-within selector browser support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion

pic
Editor guide
Collapse
nilsandrey profile image
Nils Andrey

Great tip. I just like to add some precision in terms. focus-within is a pseudo-class. There're pseudo-classes and pseudo-elements, the selector is the full "query" part of the CSS rule.

  • A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
  • A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

MDN: Pseudo-classes and pseudo-elements

Collapse
dailydevtips1 profile image
Chris Bongers Author

100% correct on the terminology here.
Thanks for the addition

Collapse
iqbalmuhammad profile image
iqbal-muhammad

Nice post... Thank you

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks! Hope you learned something new today

Collapse
itays profile image
Itay Sidis

Thanks for the post!
not so related to the subject but I noticed the inputs has the same name.. prob a copy paste typo

Collapse
kyds3k profile image
Adam Darby

Ohhh good catch!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Oh sharp eyes, copy-paste indeed haha

Collapse
rahxuls profile image
Rahul

Amzing post. Can this happen on hover too ?

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks Rahul,

I do think you can change this with a hover and then use "focus-within"

Collapse
reythedev profile image
Rey van den Berg

Another good one from the evergreen Chris!🙌

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thank you Rey!

Amazing CSS hack that can make our lives easier ✌️

Collapse
ram12ka4 profile image
Ram Kumar Basak

nice article

Collapse
dailydevtips1 profile image
Chris Bongers Author

thank you dear Ram!

Collapse
alaindet profile image
Alain D'Ettorre

Very nice

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thank you Alain!

Collapse
amarta profile image
Amarta Dey⚡

Thank you... will definitly use it next time

Collapse
dailydevtips1 profile image
Chris Bongers Author

Your welcome Amarta, looking forward to see what you'll make with it.