having-a-little-fun-with-custom-focus-styles

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself.

So you do a little research and find out that this is strongly discouraged, because the focus outline is there for a reason: it provides visual feedback for keyboard navigation (using the Tab key), letting users who can’t use a mouse or have a visual impairment know where they are on the screen.

This button shows a focus state with Chrome’s default outline style.

That doesn’t mean you’re stuck with this outline, though. Instead of removing it, you can simply replace it with something else. That way, you’ll keep your interface accessible and get more flexibility on how it looks, so you can better match your UI.

You can start by removing the default browser outline by selecting the focused state of the element and applying outline: none. Then, you may choose from each of the options ahead to replace it:

Change the background color

This works best for elements that can be filled, such as buttons. Select the focused state of the element and apply a contrasting background color to it. The higher the contrast the better because subtle changes may not be strong enough visual cues, particularly in cases where with color blindness and low-vision.

In the example below, both background and border color change; you may pick either or both.

Click or focus with the Tab key to view how this state looks.

See the Pen


Elements replacing native outline focus with background color
by Lari (@larimaza)


on CodePen.

Change the text color

If the element has any text, you can select the focused state and change its color. This also works for icons applied with mask-image; you can select the icon as a descendant of the focused element and change its background color, like the example button below.

See the Pen


Elements replacing native outline focus with text and icon color
by Lari (@larimaza)


on CodePen.

Again, contrast is key. You may also consider using an underline on text links and making it part of the changed state because, as the Web Content Accessibility Guidelines state:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Understanding Success Criterion 1.4.1

Apply a box shadow

The box-shadow property can do exactly the same job as the outline, except it’s much more powerful — you can now control its color, opacity, offset, blur radius and spread radius. And if a border-radius is specified, the box shadow follows the same rounded corners.

See the Pen


Elements replacing native outline focus with box shadow
by Lari (@larimaza)


on CodePen.

You can get really creative with this technique (seriously though, don’t do this):

See the Pen


Elements replacing native outline focus with insane box shadow
by Lari (@larimaza)


on CodePen.

This works for virtually any type of focusable element, like toggles, checkboxes, radio buttons and slides.

See the Pen


Toggle and radio button replacing native outline focus with box shadow
by Lari (@larimaza)


on CodePen.

Increase the element’s size

As an alternative to color change, you may also resort to subtle size modification as focus feedback. In this example, we’re using transform: scale.

See the Pen


Elements replacing native outline focus with transform scale
by Lari (@larimaza)


on CodePen.

The key here is subtlety. Extreme size changes may cause content reflow, not to mention a poor experience for those who prefer reduced motion.

Replicate existing hover styles

If the element already has a contrasting hover style, you can simply take that style and apply it for the focused state as well. This is a rather elegant solution, as you don’t have to add any new colors or outlines to the interface.

Here’s an example where both the focus and hover states adopt a high contrast to the background of an element’s default style:

See the Pen


Elements replacing native outline focus with hover styles
by Lari (@larimaza)


on CodePen.

Bonus: Customize the default outline

Everything we’ve looked at so far takes the assumption that we want to remove the focus outline altogether. We don’t have to! In fact, it’s a border that we can customize.

button:focus {
  outline: 3px dashed orange;
}

That’s shorthand and could have been written this way if we want to fine-tune the styles:

button:focus {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: orange;
}

One additional superpower we have is the outline-offset property, which is separate from the outline shorthand property but can be used alongside it to change the position of the focus ring:

button:focus {
  outline: 3px dashed orange;
  outline-offset: 10px;
}

Conclusion

You can mix and match all of these options to get custom styles that look appropriate for each component type within your interface.

And it’s worth repeating: Don’t forget to use stark color contrasts and other visual cues in addition to color when adopting custom focus states. Sure, we all want an experience that aligns with our designs, but we can adhere to good accessibility practices in the process. The W3C recommends this tool to test the contrast of colors values against the WCAG guidelines.

142 comments

  1. Greetings! Very useful advice in this particular article!
    It is the little changes that produce the largest
    changes. Thanks a lot for sharing!

  2. Hello! I’ve been following your site for a long time now and finally got the bravery to go
    ahead and give you a shout out from Kingwood Tx! Just wanted
    to mention keep up the good work!

  3. Hey! I know this is kind of off-topic however I needed to ask.
    Does building a well-established blog like yours require
    a lot of work? I am brand new to blogging however I do write in my diary daily.
    I’d like to start a blog so I can easily share my own experience and views online.
    Please let me know if you have any ideas or tips for new aspiring
    bloggers. Appreciate it!

  4. Thanks a lot for sharing this with all folks you
    actually realize what you are speaking about! Bookmarked.
    Kindly additionally consult with my website =).
    We could have a link alternate contract among us

  5. An interesting discussion is definitely worth comment.
    I think that you should publish more on this issue, it might not be a taboo matter but typically folks don’t talk about such topics.
    To the next! All the best!!

  6. I do not know if it’s just me or if everybody else experiencing
    problems with your site. It looks like some of the text on your content are running
    off the screen. Can someone else please comment and let me know if
    this is happening to them too? This might be a issue with my internet browser because I’ve
    had this happen before. Cheers

  7. Undeniably believe that which you said. Your favorite reason appeared to be on the web the simplest thing
    to be aware of. I say to you, I certainly get irked while people think
    about worries that they plainly do not know about.
    You managed to hit the nail upon the top and also
    defined out the whole thing without having side-effects , people can take a signal.
    Will probably be back to get more. Thanks

  8. Greetings I am so thrilled I found your weblog,
    I really found you by accident, while I was searching on Aol for something else, Nonetheless I am
    here now and would just like to say many thanks for a
    tremendous post and a all round exciting blog (I also love the
    theme/design), I don’t have time to go through it all at
    the minute but I have bookmarked it and also added your RSS feeds, so when I have time I will
    be back to read more, Please do keep up the fantastic jo.

  9. You made some decent points there. I looked on the web for additional information about the issue and found most individuals will go along with your views on this
    website.

  10. I every time used to read paragraph in news papers but now
    as I am a user of net so from now I am using net for posts, thanks to web.

  11. Have you ever considered creating an e-book or guest authoring on other sites?
    I have a blog based upon on the same subjects
    you discuss and would love to have you share some stories/information. I know my subscribers
    would value your work. If you’re even remotely interested, feel free to send me an e-mail.

  12. continuously i used to read smaller posts which also clear
    their motive, and that is also happening with this piece
    of writing which I am reading here.

  13. What i do not understood is actually how you are no longer really a lot more neatly-favored than you might
    be right now. You are very intelligent. You already know therefore considerably in the case of this matter, made me for my part
    believe it from numerous varied angles. Its like women and men aren’t involved except it is something to accomplish with Woman gaga!
    Your own stuffs outstanding. Always deal with it up!

  14. Hello, i read your blog occasionally and i own a similar one
    and i was just wondering if you get a lot
    of spam remarks? If so how do you reduce it, any plugin or anything you can advise?
    I get so much lately it’s driving me crazy so any help
    is very much appreciated.

  15. Pretty nice post. I just stumbled upon your weblog and wanted to say that I have truly loved surfing
    around your blog posts. After all I will be subscribing
    in your feed and I’m hoping you write once more very soon!

  16. Hey just wanted to give you a quick heads up and let you know a few of the pictures
    aren’t loading properly. I’m not sure why but I think its a linking
    issue. I’ve tried it in two different browsers and both show the same outcome.

  17. I will immediately clutch your rss feed as I can’t find your email subscription hyperlink or
    newsletter service. Do you have any? Kindly permit me know in order that I may
    just subscribe. Thanks.

  18. I am curious to find out what blog system you happen to be utilizing?
    I’m having some small security problems with my latest website and I’d like to find something more safe.
    Do you have any recommendations?

  19. We are a group of volunteers and starting a new scheme in our community.
    Your site offered us with valuable information to work on. You have done an impressive job and our whole community will be grateful to you.

  20. Hello, i think that i saw you visited my site so i came to return the prefer?.I am attempting to find issues to improve
    my site!I guess its adequate to use some of your ideas!!

  21. An outstanding share! I have just forwarded
    this onto a coworker who had been conducting a little research on this.

    And he in fact ordered me lunch due to the fact that I discovered it
    for him… lol. So let me reword this…. Thank YOU for the meal!!
    But yeah, thanks for spending some time to talk about this subject here on your website.

  22. Write more, thats all I have to say. Literally, it seems as
    though you relied on the video to make your point.
    You obviously know what youre talking about, why
    throw away your intelligence on just posting videos to your blog when you could be giving
    us something informative to read?

  23. whoah this blog is fantastic i love reading your articles.

    Stay up the great work! You recognize, lots of people are looking around for this information, you can aid them greatly.

  24. Admiring the time and energy you put into your website and
    in depth information you present. It’s good to come across a blog
    every once in a while that isn’t the same old rehashed information. Great read!
    I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

  25. Great post. I was checking constantly this blog and I’m impressed!
    Extremely helpful information specifically the last part :
    ) I care for such info much. I was seeking this particular information for a long time.
    Thank you and best of luck.

  26. Just wish to say your article is as astonishing.
    The clarity in your post is just nice and i can assume you are an expert on this subject.
    Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post.
    Thanks a million and please keep up the rewarding work.

  27. Hi! I could have sworn I’ve been to this website before but after going through many of the posts I realized it’s new
    to me. Nonetheless, I’m certainly delighted I stumbled upon it
    and I’ll be bookmarking it and checking back often!

  28. Hello there, I discovered your website via Google while looking
    for a comparable topic, your site came up, it seems great.
    I’ve bookmarked it in my google bookmarks.
    Hi there, just became alert to your blog thru Google,
    and found that it’s truly informative. I am going to be careful for brussels.
    I’ll be grateful in case you continue this in future.
    Many other folks will probably be benefited from your
    writing. Cheers!

  29. May I just say what a comfort to discover somebody that really knows what they are talking about online.
    You actually realize how to bring an issue to light and make it important.
    More and more people need to look at this and understand this side of your story.
    I was surprised you are not more popular since
    you definitely have the gift.

  30. First off I want to say fantastic blog! I had a quick question that I’d like to ask if you do not mind.

    I was curious to find out how you center yourself and clear
    your head prior to writing. I’ve had difficulty clearing
    my thoughts in getting my ideas out there. I truly do take pleasure in writing but it just
    seems like the first 10 to 15 minutes tend to be lost simply just trying to figure out
    how to begin. Any suggestions or hints? Many thanks!

  31. I know this web site offers quality dependent content and other material, is there any other website which presents these data in quality?

  32. These are genuinely enormous ideas in about blogging. You have touched some nice things here.
    Any way keep up wrinting.

  33. hello there and thank you for your info – I’ve definitely picked up anything new from right here.
    I did however expertise some technical points using this website, since I experienced to reload the web
    site a lot of times previous to I could get it to load correctly.
    I had been wondering if your web host is OK? Not that I’m complaining,
    but slow loading instances times will often affect your placement in google and can damage
    your high-quality score if advertising and marketing with
    Adwords. Anyway I am adding this RSS to my email and
    can look out for much more of your respective interesting content.

    Ensure that you update this again soon.

  34. I’m not that much of a online reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your website to come back in the
    future. Cheers

  35. Hello! Do you use Twitter? I’d like to follow you if that would be ok.
    I’m absolutely enjoying your blog and look forward to new
    updates.

  36. Your style is so unique compared to other people I have read stuff from.
    I appreciate you for posting when you have the opportunity, Guess I’ll
    just bookmark this blog.

  37. Hello would you mind letting me know which webhost you’re working with?
    I’ve loaded your blog in 3 completely different internet browsers and I
    must say this blog loads a lot faster then most. Can you recommend a good internet hosting provider at a fair price?
    Cheers, I appreciate it!

  38. Wow, superb weblog format! How long have you ever
    been running a blog for? you make running a blog glance easy.
    The entire glance of your website is magnificent, let alone the content!

  39. What’s up to every one, the contents present at this site are really remarkable for people experience, well, keep
    up the nice work fellows.

  40. Have you ever thought about creating an ebook or guest
    authoring on other sites? I have a blog based upon on the same information you discuss
    and would really like to have you share some stories/information. I
    know my viewers would value your work. If you are even remotely interested, feel free to shoot me an e-mail.

  41. Heya! I just wanted to ask if you ever have
    any trouble with hackers? My last blog (wordpress) was
    hacked and I ended up losing months of hard work due to no back
    up. Do you have any solutions to prevent hackers?

  42. This is very fascinating, You’re an overly professional blogger.
    I have joined your feed and sit up for in search of more of your
    wonderful post. Also, I’ve shared your website in my
    social networks

  43. Hey there this is kind of of off topic but I was wondering
    if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding experience
    so I wanted to get guidance from someone with experience.
    Any help would be greatly appreciated!

  44. Hey there! I’m at work surfing around your blog from my new iphone 3gs!

    Just wanted to say I love reading through your blog and look
    forward to all your posts! Keep up the excellent work!

  45. hello!,I like your writing very so much! share we communicate more approximately your article on AOL?
    I need an expert on this house to unravel my problem.
    May be that’s you! Looking ahead to peer you.

  46. What’s up to every body, it’s my first pay
    a quick visit of this webpage; this website consists of remarkable and genuinely excellent data designed for readers.

  47. I seriously love your blog.. Excellent colors & theme.
    Did you develop this web site yourself? Please reply back as
    I’m wanting to create my own personal blog and would love
    to learn where you got this from or what the theme is named.
    Appreciate it!

  48. Great goods from you, man. I’ve take into accout your stuff previous to and you’re simply extremely magnificent.
    I really like what you have received here, really like what you
    are saying and the way in which wherein you
    assert it. You are making it entertaining and you continue to
    take care of to keep it smart. I can not wait to read far more from you.
    That is actually a tremendous web site.

  49. of course like your website however you have to take a look
    at the spelling on several of your posts. A number of them are rife with spelling problems and I to
    find it very troublesome to tell the truth on the other hand I will surely come back again.

  50. If you are going for best contents like myself, simply visit this site every day because it offers quality contents,
    thanks

  51. Hmm it looks like your blog ate my first comment (it was extremely long) so
    I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your
    blog. I as well am an aspiring blog writer but I’m still new to everything.
    Do you have any points for inexperienced blog writers? I’d definitely appreciate
    it.

  52. Hello there, I do believe your site may be having web browser compatibility issues.
    Whenever I take a look at your website in Safari, it looks fine however, if opening in I.E.,
    it has some overlapping issues. I simply wanted to give you
    a quick heads up! Apart from that, wonderful blog!

  53. I’m not sure exactly why but this weblog is loading very slow for me.
    Is anyone else having this issue or is it a problem on my end?
    I’ll check back later on and see if the problem still exists.

  54. When I originally commented I clicked the “Notify me when new comments are added” checkbox
    and now each time a comment is added I get four e-mails with the
    same comment. Is there any way you can remove
    people from that service? Bless you!

  55. Thanks for the marvelous posting! I seriously enjoyed reading it, you happen to be a great author.

    I will remember to bookmark your blog and definitely will come back sometime soon. I want to encourage you to definitely continue your great posts, have a nice morning!

  56. Howdy! This is my first comment here so I just wanted to give a quick
    shout out and tell you I really enjoy reading your posts.
    Can you recommend any other blogs/websites/forums that go
    over the same topics? Thanks!

  57. I every time used to read piece of writing in news papers but now as I
    am a user of internet therefore from now I am using net for posts, thanks to web.

  58. This design is incredible! You definitely
    know how to keep a reader amused. Between your wit and your videos, I was almost
    moved to start my own blog (well, almost…HaHa!) Fantastic job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

  59. You are so interesting! I do not suppose I’ve truly read through something like this before.

    So nice to find someone with some unique thoughts on this subject.
    Seriously.. thank you for starting this up. This website is something
    that’s needed on the internet, someone with a bit of
    originality!

  60. It’s a pity you don’t have a donate button! I’d definitely donate to
    this brilliant blog! I guess for now i’ll
    settle for book-marking and adding your RSS feed to my Google account.
    I look forward to brand new updates and will share this website with my Facebook group.
    Chat soon!

  61. That is really interesting, You are an excessively skilled blogger.
    I have joined your feed and sit up for looking for extra of your fantastic post.
    Also, I’ve shared your web site in my social networks

  62. Thanks for your marvelous posting! I genuinely enjoyed reading it, you
    happen to be a great author. I will remember to bookmark your blog and will come back from
    now on. I want to encourage you to definitely continue
    your great work, have a nice morning!

  63. We’re a group of volunteers and opening a new
    scheme in our community. Your site offered us with
    valuable info to work on. You’ve done a formidable job and our entire community will be thankful to
    you.

  64. When someone writes an post he/she retains the plan of a user in his/her mind that how a user
    can know it. Thus that’s why this post is amazing. Thanks!

  65. My brother suggested I might like this website.
    He was entirely right. This post truly made my day. You can not imagine simply how much time I had spent for this information! Thanks!

Leave a Reply

Your email address will not be published.