pop pop - 6 months ago 13
jQuery Question

<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?

Answer

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

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

Demo: Fiddle

Comments