Strange outline happening when focusing small images

Question

I'm getting a strange outline around certain small images that I have programmatically focused using jquery. How can I fix this?

enter image description here

I need a border on it because I have a :focus class that defines what color I want the outline to be. However, when I remove the border and add 1px solid #2b5367; to outline, or remove the outline and set the border to 1px solid #2b5367; I get this: enter image description here

Which is also not what I want. I want the outter border in the first image to appear, but the inner one to not be there.

Here is the fiddle: http://jsfiddle.net/u1enqp1e/

no idea if not more info. It looks to me like browser inherit css properties. probably if you give to your element something like .classHere:focus {outline:0; border:0;} it would be solved — Alvaro Menéndez, Mar 18 '15 at 22:24
I test this in chrome. I'll add your fix, @AlvaroMenéndez and report back. — Joshua Terrill, Mar 18 '15 at 22:25
It's getting late here and bed time. I will check tomorrow morning to see if I can help you. I will probably find this question already answered but still I will check just in case. — Alvaro Menéndez, Mar 18 '15 at 22:41
When I remove border and outline, I'm left with something that resembles what I want... but when I try to add a different color to it, it goes back to what the first image looks like. — Joshua Terrill, Mar 18 '15 at 22:42

score 0 · Answer 1 · answered Mar 18 '15 at 22:53

0

As alvarado mentioned, try adding this to your css:

.classHere:focus {
    outline:0;
    border:0;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

But as you might have noticed, I have added box-shadow too along with outline and border.

You can remove the !important if the css is placed below your other css files.

answered Mar 18 '15 at 22:53

AndrewL64

15,794
8
47
79

I want to edit the color of the border outline when an element is focused, though. – Joshua Terrill Mar 18 '15 at 22:54
Oh then you can exclude the `outline: 0` from the above and replace it with your custom properties too. – AndrewL64 Mar 18 '15 at 22:55
Can you provide a jsfiddle of what you have right now so it'll be easier to find the property responsible for the extra outline – AndrewL64 Mar 18 '15 at 22:56
Here's a jsfiddle. As you can see, there are two outlines. http://jsfiddle.net/u1enqp1e/ – Joshua Terrill Mar 18 '15 at 23:00
Is it because I have a link around an image? – Joshua Terrill Mar 18 '15 at 23:06
You want to remove the bigger blue outline?? – AndrewL64 Mar 18 '15 at 23:07
No, I want to remove the smaller blue outline. – Joshua Terrill Mar 18 '15 at 23:07
Then no it's not because of the anchor. I'm just going through the css properties. Give me a sec. – AndrewL64 Mar 18 '15 at 23:09
So apparently, the only way to edit the default blue outline (called a focus-ring-color) is to create one from scratch as mentioned here: http://stackoverflow.com/questions/16057229/how-to-change-the-focus-ring-color – AndrewL64 Mar 18 '15 at 23:16
I'm googling that very thing right now lol It seems that different OSs and brosers render outlines differently btw. – AndrewL64 Mar 18 '15 at 23:20
You will have to use pre-processors (e.g. SASS) to edit that as it is a "vendor prefix" or something according to this: http://stackoverflow.com/questions/7575006/is-webkit-focus-ring-color-a-css-variable – AndrewL64 Mar 18 '15 at 23:22
I just need it to work in XP. This is an app that I'm bundling into a node webkit container. – Joshua Terrill Mar 18 '15 at 23:24
I'm sorry Josh but this vendor prefix thingy is way out of my programming knowledge league lol – AndrewL64 Mar 18 '15 at 23:26
I'm a little closer... I changed my css selector from ``` a:focus ``` to ``` a:focus img ``` and get this: http://jsfiddle.net/u1enqp1e/1/ – Joshua Terrill Mar 18 '15 at 23:33

score 0 · Answer 2 · answered Mar 18 '15 at 23:38

Apparently if you first set the outline of focused items to 0, you are then able to override the outline color using something like this.

*:focus {
    outline: none;
}

a:focus img {
    border: 1px solid #2b5367;
    box-shadow: 0px 0px 3px 1px rgba(131, 190, 223, 1);
    border-radius: 3px;
}

Here's a working fiddle: http://jsfiddle.net/wv83g8r5/

Strange outline happening when focusing small images

2 Answers2