Search code examples
htmlcssfocusw3c

Does W3C standardize the movement of focus when input gets hidden?

Let's take a sample of code. Live version. HTML:

<input type="text" class="a" />
<input type="text" class="b" />

CSS:

input:focus {
  background: red;
  display: none;
}

Here an input loses focus immediately after it gets one, because it gets hidden. The focus should go to the next input. I've thought that it should oscillate focusing either of inputs, just as it happens with bold text that gets normal on hover.

But when we open the sample in Chrome and set focus to either of fields, they both lose focus. Firefox does something even more interesting: both fields lose focus, but the one is still hidden.

I've took a look into W3C standard, but nothing seems like a description of valid behaviour.

What's the correct behaviour and is it defined at all?

Solution

  • Yes, but it's in the HTML5 spec not the CSS specs.

    This is known as focus fix-up and the spec that describes it is here: http://www.w3.org/html/wg/drafts/html/master/editing.html#focus-fixup-rule-one

    In short, it says that the focus moves to "the first non-inert focused area in [the same] control group" but the full rules are too long to be reproduced here.