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


seems firefox , ie have default of black dotted outline while chrome has default of light blue solid outline.

i tried change doing this:

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

this seems catastrophe links got dotted black outline not hovered or focused. terrible because "outline" thing can differentiate mouse focus keyboard key focus.

any other idea on how make chrome's outline 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>

you must apply rule focus state a:focus instead of a directly.


Comments

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

html - Is there any way to exclude a single element from the style? (Bootstrap) -

Delphi 7 and decode UTF-8 base64 -