CSS selector for elements having focus outline in Chrome

1
votes

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.

2
cssgoogle-chromefocus
What do you mean focused without outline? If i create a simple text input and select it with the mouse it is also focused? :focus should be the correct tag – jdickel
data:text/html,<style>a:focus{color:red}</style><a href="#">abc</a><br><a href="#">def</a> When you tab such links they both get outlined and have focus styling. When you click them, they have no outline but do have the focus styling. – jaboja
Right! Good point! a elements are not getting an outline on click. With TAB they do. Some day i read about a :focus-ring selector but i think W3C didn't do aynthing on that. – jdickel

2 Answers

2
votes

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

0
votes

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>