jqueryhtmlcssfocusfocusin

<legend> won't receive :focus event?

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?

Solution

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

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

    Demo: Fiddle