remove focus outline from link wrapping div (in Chrome)

Question

I have a div wrapped in a link tag, and when you tab to it in Chrome, it looks like this:

I know it's a minor grievance, but is there any way to get rid of the "outcropping" at the top, which I assume is Chrome outlining the link portion of the HTML. But I would like to keep the default Chrome blue outline around the image portion.

Here is a simplified test case:

HTML:

<html>
<body>
<a href='tree.com'>
<div class='card'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_- _geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/>
</div>
</a>
</body>
</html>

CSS:

.card
{
    display: inline-block;
    border-radius: 5px;
    width: 250px;
    margin: 5px;
    vertical-align: top;
    text-align: left;
}
.card img
{
    width: 250px;
    height: 250px;
}

JSFiddle:

http://jsfiddle.net/mLfkvuyw/26/

Adding the following removes the default Chrome outline from the image (and all child elements) as well, which I don't want:

a:focus
{ outline: none; }

@dippas the example code does not work... as i say in the question, i do not want to remove the default outline from the img portion. `a:focus{outline:none}` removes outlines from all the child elements — V. Rubinetti, Sep 22 '18 at 20:40
adding `display: inline-block` to the link itself will work, which may or may not be an acceptable solution for your use case. (http://jsfiddle.net/mLfkvuyw/34/) — Rose Robertson, Sep 22 '18 at 21:29
Another option is moving the outline to the div instead of the link but this requires knowledge of chrome's default outline styles which could change/not match other browsers, so IMO this is a worse option: http://jsfiddle.net/mLfkvuyw/51/ — Rose Robertson, Sep 22 '18 at 21:33

score 3 · Accepted Answer · answered Sep 22 '18 at 21:46

You can do some easy CSS, applying no outline to the parental a tag and instead adding it around the image.

.card  {
 display: inline-block;
 border-radius: 5px;
 width: 250px;
 margin: 5px;
 vertical-align: top; 
 text-align: left;
}

.nolink:focus {
  outline: 0 none !important;
}

.nolink:focus .card img {
  border: 2px solid blue;
  box-shadow: 1px 1px 1px 0 #888;
}

.card img
{
 width: 250px;
 height: 250px;
}

<html>
<body>
<a class='nolink' href='tree.com'><div class='card' ><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/></div></a>
</body>
</html>

Thank you, this is the closest thing to an answer. After another day of trying to find the true answer, it seems it is not possible to leave the _default Chrome focus outline_ around the image part while removing it from the link. But this is an acceptable work-around for my purposes. Luckily I do not have any border styles that this would interfere with, and `box-sizing: border-box` can prevent focus from undesirably pushing/reflowing elements. — V. Rubinetti, Sep 23 '18 at 18:20

score 1 · Answer 2 · answered Sep 22 '18 at 21:42

The "outcropping" is caused by the .card element's margin creating space between the link and the image elements. Margins can often cause strange layout problems in this way.

A simple fix is to remove the margin property from .card so that the focus outline will be flush with the image:

.card {
    display: inline-block;
    border-radius: 5px;
    width: 250px;
    margin: 5px;
    vertical-align: top;
    text-align: left;
}

remove focus outline from link wrapping div (in Chrome)

2 Answers2