pop pop - 1 year ago 65
jQuery Question

<legend> won't receive :focus event?

Here is the HTML:


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() {

$('legend').focusout( function() {

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

Answer Source

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

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

Demo: Fiddle