CODEWITHSUNDEEP
cssgoogle-chromefocus
jaboja
jaboja

Reputation: 2237

CSS selector for elements having focus outline in Chrome

If you navigate page by TAB in Chrome it indicates focus on elements by adding an outline. The problem is that the outline is drawn outside, so I need to apply z-index to such outlined elements, so that the outline does not get hidden by elements with higher z-index than that of the focused element.

I've tried the :focus selector, but it seems that an element can be focused in Chrome yet have no outline (e.g. if you click it with mouse). What is then the valid selector to apply a style to all outlined and only the outlined elements?

EDIT: What I mean by a focus without an outline is like in the following example:

<style> a:focus{color:red} </style>
<a href="#">abc</a><br>
<a href="#">def</a>

When you TAB over such links, they got both styled by the :focus rule and outlined, yet when you click them with mouse the style is applied but the element is not outlined by the browser.

Upvotes: 1

Views: 678

Answers (2)

jdickel
jdickel

Reputation: 1457

For Firefox you can read up on the :-moz-focusring selector.

Upvotes: 2

Felix A J
Felix A J

Reputation: 6470

Add custom css for outline style.

a{border:1px solid #fff;}
a:focus{color:red;
outline:none; 
border:1px solid #4D90FE;
-webkit-box-shadow: 0px 0px 5px  #4D90FE;
box-shadow: 0px 0px 5px  #4D90FE;} 
<a href="#">abc</a><br>
<a href="#">def</a>

Upvotes: 0

Related Questions