Affordable, keyboard-friendly way to remove focus style from checkbox after mouseup

Question

I stylized input:focus + label to visually indicate when the input was focused using keyboard navigation.

But Chrome (and maybe not just Chrome?) Remains able to :focus after using the mouse to click input, which looks ugly.

I want to remove the :focus style after clicking without changing the keyboard navigation. that is, when you click the mouse button after clicking the tag, it should no longer be red.

I saw suggestions .blur() input on mouseup; but 1) it didn’t work for me (see snippet below), and 2) I am worried that the keyboard will exit the normal stream.

Yes, someone using a mouse to click a checkbox and then go to the keyboard is the edge. But I would like to explain this.

 $("label").mouseup(function () { $(this).blur(); // This has no apparent affect. $("#" + this.htmlFor).blur(); // Or this. }); 

 input:hover + label, input:focus + label { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p>Form Part One</p> <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> <p>Form Part Two</p> <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> </form> 

Answer 1

EDITED based on comment:

 //set checkbox hover $("input").hover(function() { $(this).next("label").css("color", "red"); }, function() { $(this).next("label").css("color", "black"); }); //set label hover $("label").hover(function() { $(this).css("color", "red"); }, function() { $(this).css("color", "black"); }); //set checkbox focusin focusout $("input").focusin(function() { $(this).next("label").css("color", "red"); $(this).next("label").siblings().css("color", "black"); }); //set checkbox label active on click $('input:checkbox').on('click', function() { $(this).next('label').toggleClass('active'); }); //set radio label active on click $('input:radio').on('click', function() { $(this).next('label').toggleClass('active'); $(this).siblings().next('label').removeClass('active'); }); 

 .active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p>Form Part One</p> <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> <p>Form Part Two</p> <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> </form> 

Answer 2

I may not understand you, but I think the problem is that you are putting your event trigger in the wrong element. The input is the label parent in the case of your html structure and is the active element on which the mouseup event should fire.

 $("input").mouseup(function () { $(this).blur(); // This has no apparent affect. $("#" + this.htmlFor).blur(); // Or this. }); 

 input:hover + label, input:focus + label { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p>Form Part One</p> <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> <p>Form Part Two</p> <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> </form> 

Answer 3

When you click on the label for a flag, the focus is shifted to the flag. However, focus will not be transferred by the time the mouseup event listener starts. That way, you cleared the focus on the wrong item, and even if you tried to clear the focus on the right item, that item would not have focus yet.

You can achieve the effect you are looking for by adding an instant focus listener on the checkboxes to immediately clear the focus inside your mouse listener. This will work only after the flag receives focus, and will only work if there is a mouseup event, so it will not interfere with keyboard users.

 $("label").mouseup(function () { $(this.previousElementSibling).one('focus', function() { $(this).blur(); // This has an apparent affect. }); }); 

 input:hover + label, input:focus + label { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p>Form Part One</p> <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> <p>Form Part Two</p> <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> </form>