outline attribute conflict for IE and chrome

StackOverflow https://stackoverflow.com/questions/13605748

Pregunta

I have a problem here, I have a checkbox and a hyperlink in the html:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    </head>
    <body>                                                              
        <div>
            <input type="checkbox" class="checkbox" id="readAndAgree" name="readAndAgree">
            <div>
                <label for="readAndAgree"> 
                    I have read and agree to the <a href="http://stackoverflow.com/">Credit Profile Authorization</a>. 
                </label>
            </div>
        </div>
    </body>
    </html>

When press "tab" you can see there's dotted border around checkbox and hyperlink.

But if add the css in the head,

 <style>
        input{outline-color:green;}
        a{outline-color:green;}
 </style>

the dotted border around the checkbox and the the hyperlink disappear in IE 8, 9 10. IE7 still showing it.

I add the outline-color attribute for chrome to show the green outline when press "tab" instead of default orange color.

So how to compatible these two browsers? In chrome, it will show the green highlight, and at the same time, in IE 8, 9, 10, it will show the dotted outline/border when press "tab"?

In ie7 it will show because ie7 doesn't support outline. but IE8 with !DOCTYPE, IE9, IE10 support outline.

¿Fue útil?

Solución

CSS:

  input:focus,
  a:focus {
    outline: 1px dotted;
    outline: auto -webkit-focus-ring-color;
    outline-color: green;
  }

press tab and: ie, ff, opera: show dotted border
chrome, safari ring border

http://jsfiddle.net/84bFN/3/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top