62

Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?

EDIT

I should say, my goal is to catch keydown events on a div. I saw this page http://www.quirksmode.org/js/events/keys.html# that tests keyboard events and it shows that the only way keydown fires on anything other than document and body or some kind of form element or link is to have tabindex declared on it. But I read on W3C site:

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

So I am a little confused, what to do in order to be standarts compliant and make my use case work?

EDIT2

My whole use case is a div with a lot of content with an artificial scroll bar. I am able to scroll it with mouse events but no luck with the keyboard so far.

Boris Hamanov
  • 3,085
  • 9
  • 35
  • 58
  • 1
    Catching keyboard events on the div is not your use case. It is an implementation detail of you attempt to answer the use case. Answer it differently. (We can't give you much advice on how because you haven't told us what the real use case is). – Quentin Feb 11 '11 at 17:36

2 Answers2

30

Update 2017

As pointed out by @Wallop in the comments, the nav-index property was dropped from the spec in 2015 due to "lack of implementation interest".

Take a look at the nav-index property introduced by W3C in CSS3-UI.

This property has exactly the same behavior as a tabindex and is applicable to any element.

The ‘nav-index’ property is an input-method-neutral way of specifying the sequential navigation order (also known as "tabbing order"). This property is a replacement for the HTML4/XHTML1 attribute ‘tabindex’

Being probably the best standards-compliant solution for the use case, nav-index is interpreted only by Opera so far (as of June 2012) and is also marked as "Feature at risk" by W3C, therefore may be dropped any time.

Alternative cross-browser solutions are:

  • non-standards-compliant: set the tabindex attribute on a DIV. This will work in all common browsers.

  • standards-compliant: replace DIV by an anchor element (A) without a href attribute set, style it with display: block and add the tabindex attribute.

With respect to BoltClock´s point, I agree that the tabbing order is very logical (both the text selection order and tabbing order are closely related to the sequence in which elements are aranged in the document). On the other hand, CSS has a wider purpose today. It can manipulate not just the content of a document (content property) but also the behavior when and if events are to be fired: i.e. using pointer-events, display or z-index the pointer event's order will change. If these are very basic CSS properties, why you should not be able to influence KeyBoardEvents, too?

CommonSenseCode
  • 23,522
  • 33
  • 131
  • 186
filip
  • 3,542
  • 1
  • 26
  • 23
  • 4
    I hear `tabindex` is now allowed on all elements in HTML5... for some reason. – BoltClock Dec 12 '12 at 01:57
  • 7
    As of April 2014, `nav-index` still has relatively no browser support. :( – Jeremy A. West Apr 09 '14 at 17:17
  • 2
    @JeremyWest `nav-index` sounds good, but seems to [still not be supported](http://www.w3schools.com/cssref/css3_browsersupport.asp) by any browser. – Rafael Emshoff Nov 14 '14 at 11:08
  • 6
    nav-index is now deprecated and no new browsers support it. http://www.w3schools.com/cssref/css3_pr_nav-index.asp – thexebolud Jun 07 '15 at 17:56
  • nav-index is not completely dropped, "Dropped the nav-index property due to lack of implementation interest." as per https://www.w3.org/TR/css-ui-3/#nav-index0 – wallop Aug 17 '16 at 19:52
  • The spec has been updated. For anyone still interested, the cited text is now to be found in [the Candidate Recommendation 20150707](https://www.w3.org/TR/2015/CR-css-ui-3-20150707/#changes-since-2012) – agrm Dec 28 '17 at 15:32
6

This is a bit old but now there are css options like -moz-user-focus. I'm sure there is a webkit equivalent.

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

user-focus is the standard cross browser attribute.

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • 7
    It's just I was having the same issue and wanted to answer it with the way the user asked it. These stackoverflow topics come up a long on bing and google so i wanted to add the answer in here. – Noitidart Nov 29 '12 at 03:36
  • 1
    @SamB set `-moz-user-focus: none` or `-moz-user-focus: -moz-none` or `user-focus: none` on your element. `user-focus` is the standardized way. – Noitidart Jan 29 '16 at 02:49
  • Does it support setting a specific index for the focus? I don't see anything about it in the spec, maybe it's tab index will be determined by its location in the dom. – miir Feb 24 '18 at 00:35
  • @miir to set a certain tabindex you have to use the html attribute I think. – Noitidart Feb 24 '18 at 00:40
  • 1
    This solution doesn't answer the question in any way, as `-moz-user-focus` only controls whether element is focusable, not it's tabbing order, which is what the question was about. – Robert Kusznier Jul 03 '18 at 13:11
  • This also works on [Firefox ONLY](https://caniuse.com/#search=user-focus). – Laoujin Oct 11 '19 at 14:48
  • @Laoujin `user-focus` is the non-firefox attribute. – Noitidart Oct 11 '19 at 14:54
  • 3
    @Noitidart Can you please provide proof that `user-focus` is a standard? I can't find documentation to support your assertion. – roydukkey Mar 17 '21 at 19:37