4

I've been tasked with changing the focus outline for the element (link, button, etc…) that currently has the focus (making it highly visible).

The site has a lot of links with complex content. Divs within the link elements are common. But as I understand it, divs within link elements are ok in html5 (please correct me if I'm wrong).

If I keep the default outline (for example a dotted line in firefox), it works fine in most browser (not IE). It will be shown around the border of the link. But if I apply my own outline it starts behaving very weird:

  • Google Chrome: The link containing a div get no outline at all.
  • Firefox: The outline is shown, but the shape of it looks really weird.
  • Internet Explorer: The link containing a div get no outline at all (not even if I leave the default on).
  • Microsoft Edge: The link containing a div get no outline at all.
  • Opera: The link containing a div get no outline at all.

Am I doing something wrong?

Here's an example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test 3</title>
        <style>
            .custom-focus:focus {
                outline: #fa0 solid 2px;
            }
        </style>
    </head>
    <body>
        <a href="#">Link A1 (Link with just text, default focus outline)</a>
        <br />
        <a href="#" class="custom-focus">Link A2 (Link with just text, custom focus outline)</a>
        <br />
        <a href="#">
            <div>Link B1(Link with div inside, default focus outline)</div>
        </a>
        <br />
        <a href="#" class="custom-focus">
            <div>Link B2(Link with div inside, custom focus outline)</div>
        </a>
    </body>
</html>

I've also created a JS fiddle with the same code: https://jsfiddle.net/5jar7ma5/3/

haagel
  • 2,646
  • 10
  • 36
  • 53

1 Answers1

2

Check if changing the css display to "inline-block" will do the trick.

.custom-focus { display:inline-block; } .custom-focus:focus { outline: #fa0 solid 2px; }

u2tope
  • 48
  • 1
  • 6