CODEWITHSUNDEEP
htmlcssgoogle-chrome-extension
Christina.Codes
Christina.Codes

Reputation: 88

How can I remove a link focus outline on a Chrome extension?

I made a simple Chrome extension with links to some frequent bookmarks. When you open it, it automatically focuses on the first link, which is the logo image at the top.

enter image description here I think it looks much better without the focus, and the person that I'm making the extension for has no need for accessibility features.

I referenced this StackOverflow question and tried to overwrite this in the CSS with outline: none; and 'outline: none !important;. I've also tried changing the color to a different shade or to transparent using outline-color: transparent;. Neither of these has worked.

It's worth mentioning that the outline does not show up when I view the html document in Chrome. It only happens when it's uploaded as a Chrome extension.

You can see my code here: https://github.com/christinahouck/Daniels_Chrome_Extension

Upvotes: 0

Views: 763

Answers (1)

Pramvir Raghav
Pramvir Raghav

Reputation: 101

You can just use this:

a:active, a:focus {
   outline: 0;
   border: none;
   -moz-outline-style: none;
}

Upvotes: 2

Related Questions