Toggle Switch Hiding Focus box

[matt_Kerg]

I am wanting to get rid of the focus box for a toggle sheet. I have search just about everywhere so if the answer is out there. I apologize in advance.

I also tried some think in style of the component and events.focus but with no luck.

Here is what I put in my stylesheet.css

> 
> [data-component~="toggle-switch"] focus {
>     /* Styles for toggle switch input (checkbox) */
>     border: none;
>     display: none;
> }
> 
> [data-component~="togswchOnlyMilestones"] focus {
>     /* Styles for toggle switch input (checkbox) */
>     border: none;
>     display: none;
> }

[Brandon_Peterson]

This should do it for you.

div.ia_toggleSwitch:focus
{
  outline: none;
}

I would add that this does decrease the accessibility of your application, since you're removing the focus indicator what keyboard-only users rely on to know where the focus is on the page.

Also, if you want this style (and others) applied across projects, I'd recommend creating a new theme.

[matt_Kerg]

Thanks