CODEWITHSUNDEEP
htmlcss
haagel
haagel

Reputation: 2726

Custom focus outline for links with div inside

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:

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/

Upvotes: 4

Views: 1287

Answers (1)

u2tope
u2tope

Reputation: 48

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; }

Upvotes: 2

Related Questions