Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

NICOLE REBENTISCH
NICOLE REBENTISCH
3,612 Points
Posted by NICOLE REBENTISCH
NICOLE REBENTISCH
3,612 Points

Using ```a:focus``` does not seem to override the blue outlining of the word when tabbed. How to get rid of the blue?

Unlike other CSS styles that override the browser's automatic styling, using a:focus does not seem to override the blue outline that shows up when an element is focused. I am using a Chrome browser, so it may format differently in another browser. What I want to know is how to get rid of that ugly blue outline! Have tried using a:focus { border: 2px solid white;} but that doesn't fix the issue. Ideas?

1 Answer

Shaun Kelly
Shaun Kelly
35,560 Points

Hi Nicole,

I presume you are referring to the outline property. Try without the focus psuedo class:

a {
     outline: none;
}

Hope this helps, Shaun

NICOLE REBENTISCH
NICOLE REBENTISCH
3,612 Points
NICOLE REBENTISCH
NICOLE REBENTISCH
3,612 Points

Oh my goodness, how simple! Thank you so much, that definitely solved the problem.