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
Adam Smallman
4,182 PointsBootStrap dotted line when clicking a tag
Hey guys, I have been working with bootstrap and I have this strange issue where when a a tag is clicked there is a strange dotted line goes around the tag
It must be something in Bootstraps CSS files. I have look through them but I could not find anything..
Would be as easy as putting something in an external css file to fix the issue?
4 Answers
Nachiket Kumar
3,590 PointsWhat browser and version are you using Adam? Try and test it in different browsers, it sounds more like a browser issue than a bootstrap one, as I don't recall seeing it when I've worked with Bootstrap.
Adam Smallman
4,182 PointsI just took a look and it works in Chrome but it appears in IE and FireFox.
Nachiket Kumar
3,590 PointsAs I suspected, it's a browser issue. In Chrome, if you use dev tools (there's a course here that can teach you more if you need), you will see the following on inspecting the :focus state of an <a> tag:
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
The first property has a strikethrough, it gets overridden by the 2nd outline property in Chrome. In Firefox, the first property applies, since it is not a webkit browser.
This is an accessibility thing that you probably shouldn't change, see this article by Chris Coyier. If you want to remove it, simple override it by setting
a:focus {
outline: 0;
}
But make sure to provide some other :focus state for <a> tags. I don't use IE, but I imagine the reason is the same and you can figure it out. Hope this helps.
Nachiket Kumar
3,590 PointsCan't seem to edit my comment, but here is the Chrome Dev Tools course
Adhithya Kumar
4,972 PointsTry adding this to your css
a {
outline:none;
}
Adam Smallman
4,182 PointsThanks guys, I will give this ago!