making focus invisible for radio buttons on click but focus should be visible on keyboard navigation

Question

How do I make focus invisible for radio buttons only on click (focus should be visible through keyboard navigation)

disabling mouse down event or using settimeout(()=>$(event.target).blur(),1) on mousedown is working but selection of radio buttons using arrow keys is not working when focus is from click.

so,whats the best way to make focus invisible for radio buttons only on click without making arrow key selection unusable?

Thanks in advance

Answer 1

Are we talking about

pointer-events: none;

or am i missing something?

Answer 2

You can try this code:

HTML:

<input type="text" class="inp" />
<input type="radio" class="rb" />

CSS:

.inp {
   display: block;
}

.rb {
 /*hide default outline*/
   outline: none;  
}

[type=radio]:not(:hover):not(:active):focus {
  /*set custom focus ring instead via box-shadow*/
    box-shadow: 1px 0 1px #c5c3c3 inset, -1px 1px 1px #c5c3c3 inset, 0px 0px 0 2px #fff, 0px 0px 0 3px rgb(100, 149, 237);
}   

It will hide focus ring on hover and on click but display it when radio button getting focus via keyboard.

Here is link to JSFiddle

There is also a proposal for that kind of thing called focus-ring (currently only implemented in Firefox but there is polyfill for that.

Answer 3

This worked for me

added event handlers for mousedown and blur as below

--------------- Template -----------------

<input type="radio"
(mousedown)="removeOutline($event)"
(blur)="radioBlur($event)"/>

------Event Handlers -----------------

removeOutline(event: MouseEvent): void {
        $(event.target).addClass("focus");
    }

radioBlur(event: MouseEvent): void {
        $(event.target).removeClass("focus");
        if ($(event.target).attr("class") === "") {
            $(event.target).removeAttr("class");
        }
    }

 -----------css---------------
  .focus {
        outline: 0;
   }