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 -

how to prompt save As Box in Excel Interlop c# MVC 4 -

xslt 1.0 - How to access or retrieve mets content of an item from another item? -