How to remove the border around image appearing after clicking on the image in Google Chrome?

Question

Actually I'm using a plugin SpryTabs to navigate the menu. I've used two background-images for activating and deactivating of tabs. I'm activating a tab on hover. Means the tab gets highlighted and deactivate the selected tab on clicking other tab.

Until here everything is fine. But the real problem comes when user clicks on the tab after hover, the border gets displayed around the image.

This doesn't happen in Firefox, it happens only in Chrome and IE.

score 31 · Accepted Answer · answered Mar 01 '13 at 12:45

31

You can add the following code in CSS for specific elements

textarea:focus, input:focus{
    outline: none;
}

And for all elements on a page use this generalized code in your css

*:focus {
    outline: none;
}

This worked for me when there was an orange coloured border appearing around the images and input boxes.

answered Mar 01 '13 at 12:45

PHPLover

1
51
158
311

1

While these are all technically correct, it's generally a bad idea from an accessibility point of view to remove these. I wouldn't do this on any production web site with a sizable audience. Alternatively you could remove the outline but then add some other indication of where the keyboard focus is. – Brendan Heywood Mar 01 '13 at 12:49
@BrendanHeywood. According to your point of view you are right, but if there is any requirement to remove such border irrespective of the awareness of click event you could make use of this solution. That's it. – PHPLover Mar 01 '13 at 12:52
@BrendanHeywood Sergio suggested `outline: 1px solid transparent;`. Will that work as a solution that solves the original problem _and_ works fine from an accessibility point of view? – ADTC Feb 24 '21 at 01:42
@BrendanHeywood I guess not, since the point of accessibility is to show a visible border around the element. The best way is to target specific elements where you want to remove the outline, and not do a CSS reset over the entire page. – ADTC Feb 24 '21 at 02:46

score 5 · Answer 2 · answered Mar 01 '13 at 11:48

5

Try outline: none; on the images

answered Mar 01 '13 at 11:48

Harsha Ivaturi

371
2
9

score 3 · Answer 3 · answered Mar 01 '13 at 11:55

3

Had same issue once, following style fixed problem:

outline: 1px solid transparent;

Btw outline:none has no effect for chrome for some reason

answered Mar 01 '13 at 11:55

Sergio

6,900
5
31
55

1

Would be interesting to find out why you experienced this. Just to add a counterpoint here, I just added outline:none to an instance of this I was having (it was a ` – Joel Martinez Feb 19 '14 at 15:41

score 2 · Answer 4 · edited May 23 '17 at 12:32

2

Useoutline:none or outline:0

Check the similar one here

edited May 23 '17 at 12:32

Community

1
1

answered Mar 01 '13 at 11:49

Sowmya

26,684
21
96
136

How to remove the border around image appearing after clicking on the image in Google Chrome?

4 Answers4