A useful alternative to :focus in CSS

A lot of the time, you probably want :focus-visible instead of :focus!

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[patricknelson]

See, this is why I love watching your shorts. Even though I feel like I know a lot about HTML and CSS, I’m also *painfully* aware that there’s tons I do not know. The more I learn, the more I realize there’s plenty to improve upon and it just feels good knowing that there are better ways of doing things, especially as browser standards evolve and improve. Especially for a11y! ❤

[chinmayghule]

I had a lot of problem understanding this since I didn't make multiple form elements when I was testing it out.

From my tests, as far as i remember, input elements show outline both on mouse and keyboard focus. This created a lot of confusion for me.

[ErulianADRaghath]

Ohh! That's how to do it?! Thx for the tip man!

[chrism]

Personally, I would use hover and focus-visible on the buttons

[maxanimator]

Oh so that's what it's for !

[Itsmeee]

I have a Problem with the Navigation.
I want to do this with a:Focus + a to change the Color if one of the Navi is select, but it Not work, can you help me to do this with only html css please 🥺
Sorry about my English

[MichaelCampbell]

I don't know that it would be great, actually. I don't understand why people get so bent out of shape over a focus ring, but I guess that's me.

[djblast]

Wouldn't it be problematic for accessibility if something is focused. Regardless if mouse user or not. Considering some folks have spectrum of disabilities and keyboard isn't always the default

[HenryTitor]

Pls, stop making invisible focus elements