I'm struggling with a simple form where I want to highlight the focused labels by changing their background colors. However, the jquery code doesn't seem to be working as expected. Despite no errors showing up in the console, the functionality isn't behaving as intended. Can someone provide some help on this issue?
<form action="" method="POST" id="qrForm">
<label for="enter1">Enter<input id='enter1' type="radio" name="enter"></label>
<label for="enter2">Exit<input id='enter2' type="radio" name="enter"></label><br>
<label for="device1">Took a device<input id="device1" type="radio" name="device"></label>
<label for="device2">Returned a device<input id="device2" type="radio" name="device"></label>
</form>
<script>
$("label").focus(function(){
$(this).css('background-color', '#00CC66');
});
</script>
While I could use the approach of adding/removing a class to achieve the desired result, I find it puzzling why the current setup isn't functioning correctly.