css focus not working in safari and chrome

问题

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.

回答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 ...

回答2:

This is also the case for Webkit based 'focus' events, it doesn't take. The fix is to put a tabindex="0" attribute on the A and then it receives the focus event. You might also want to have at least a "#" as the href just in case.

回答3:

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

回答4:

The solution posted by user1040252 did the trick for me.

I have a div with images that sets an image in a span tag to visible on a click. Firefox ignores the classname:focus in my CSS file.

<div class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
    <img src="pictures\\figures\\image_1.JPG"/>

</span>
</div>

My CSS (part of it):

.thumbnail_frame:focus span{visibility: visible;}
//...
.thumbnail_frame span
{
    visibility: hidden;
    position: fixed;
    top: 20px;
    left: 20px
}

But this only worked in Internet Exporer 9. Firefox 12 kept ignoring the focus also in other simple examples like found here: explanation: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm try it: http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm

But adding tabindex="0", as in

<div tabindex="0" class="thumbnail_frame">  
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
    <span>
        <img src="pictures\\figures\\image_1.JPG"/>

    </span>
    </div>

works like a charm. One click opens the hidden span, and the second one closes it very neatly.

回答5:

Use tabindex="0" to make an element focusable if it is not already. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex for more information about tabindex.

Setting tabindex to -1 makes it unfocusable. Setting tabindex to a positive integer is not recommended unless you're trying to explicitly set the tab order, as it can create accessibility issues.

For more information about tabindex and accessibility, see https://webaim.org/techniques/keyboard/tabindex.

回答6:

You should know that the pseudo class :focus doesn't go with A. The A tag has 4 pseudo classes : :link, :hover, :active, :visited

来源：https://stackoverflow.com/questions/5832436/css-focus-not-working-in-safari-and-chrome

标签

css

focus