css focus not working in safari and chrome

Question

I got one strange problem which I never got before. Please see this code:

The css:

#btn{
    margin-left:150px;
    padding:10px;
    display:block;
}
#btn a{
    padding:5px 20px;
    background:green;
    color:#FFF;
    text-decoration:none;
    outline:none;
}
#btn a:hover{
    background:#933;    
}
#btn a:focus, #btn a:active{
    background:#CF0;
color:#000; 

}

Here the HTML

<div id="btn">
   <a href="#">Click here</a>
</div>

The focus and active css working well in firefox, but not in the chrome and safari.

Answer 1

Yeah seems like little problem with focus in webkit. Not really a bug. Easily fixable in html. Just use tabindex.

     <a href="#" class="hide" tabindex="1">[hide]</a>
     <a href="#" class="show" tabindex="2">[show]</a>

ta da ...

Answer 2

It's fixable, some additional code needed though...

<div id="btn">
    <a href="#" tabindex="1">Click here</a>
</div>

jsfiddle

I know it's ridiculous... You can read more here

Hope this helps