<legend> won't receive :focus event?

Question

Here is the HTML:

              <fieldset>
                <legend>FieldsetName</legend>
                <div></div>
              </fieldset>

Here is the CSS:

legend:focus {
  background-color: #ffddbe;
  outline: none; 
}
legend.focusin {
  background-color: #ffddbe;
  outline: none; 
}

Clicking on it doesn't do anything.

OK, I thought, I'll go with jQuery.

$('legend').focusin( function() {
    $(this).addClass('focusin');
    });

$('legend').focusout( function() {
    $(this).removeClass('focusin');
});

It doesn't help either. However, if $('legend') listens to "click", it does what it is supposed to do. What gives?

Answer 1

Not sure whether it is the correct fix, but adding a tabIndex fixes it

<legend tabIndex="1">FieldsetName</legend>

Demo: Fiddle

Answer 2

It's best to use tabindex="0".

<legend tabindex="0">FieldsetName</legend>

Here's a breakdown of possible tabindex values and use cases:

• tabindex="0" allows an element to receive focus in the order that it appears in the DOM.
• tabindex="1" (or any number greater than 1) defines an explicit tab order. This is almost always a bad idea.
• tabindex="-1" allows elements besides links and form elements to receive focus programmatically