outline-style different in chrome compared to firefox and internet explorer

0
votes

seems firefox and IE have a default of black dotted outline while chrome has a default of a light blue solid outline.

I tried to change that by doing this:

a{
 outline-style: dotted;
 outline-color: black;
}

this seems to do a catastrophe as suddenly all links got a dotted black outline even not hovered or focused. this is terrible because "outline" is the only thing that can differentiate a mouse focus from a keyboard key focus.

any other idea on how to make chrome's outline look like the others ?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body{
            font-size: 1.5em;
            font-family: verdana;
        }
        
        .zone2 a{
            outline-width: thick;
            outline-color: red;
        }
        
        .zone3 a{
            outline-style: solid;
        }
    </style>
</head>

<body>
outline tests:<br/>

<div class="zone1">
<a href="#">test link 1</a><br/>
<a href="#">test link 2</a><br/>
<a href="#">test link 3</a><br/>
</div>

<br/>

<div class="zone2">
<a href="#">test link 1</a><br/>
<a href="#">test link 2</a><br/>
<a href="#">test link 3</a><br/>
</div>

<br/>

<div class="zone3">
<a href="#">test link 1</a><br/>
<a href="#">test link 2</a><br/>
<a href="#">test link 3</a><br/>
</div>
    


</body>

</html>
1
htmlcssgoogle-chrome

1 Answers

0
votes

You must apply rule to focus state like a:focus instead of a directly.