# Toggle Switch Hiding Focus box

**URL:** <https://forum.inductiveautomation.com/t/toggle-switch-hiding-focus-box/92482>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 27, 2024, 5:29pm UTC](https://forum.inductiveautomation.com/t/toggle-switch-hiding-focus-box/92482 "2024-06-27T17:29:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![matt\_Kerg](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@matt\_Kerg](https://forum.inductiveautomation.com/u/matt_Kerg)\
**Post date:** [June 27, 2024, 5:29pm UTC](https://forum.inductiveautomation.com/t/toggle-switch-hiding-focus-box/92482/1 "2024-06-27T17:29:13Z")

</div>

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

```python
> 
> [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;
> }

```

![Screenshot 2024-06-27 225128](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/0535fd73cd73c45635cf165e71d310541cc4bcbc.png)

 ![Screenshot 2024-06-27 224915](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da2cc59eac2b8a19fbe2cc2816b660428ccee09d.png)

---

<div class="post-metadata">

**Author:** ![Brandon\_Peterson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/brandon_peterson/32/32960_2.png) [@Brandon\_Peterson](https://forum.inductiveautomation.com/u/Brandon_Peterson)\
**Post date:** [June 27, 2024, 6:00pm UTC](https://forum.inductiveautomation.com/t/toggle-switch-hiding-focus-box/92482/2 "2024-06-27T18:00:48Z")

</div>

This should do it for you.

```css
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](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/creating-and-using-custom-perspective-themes).

---

<div class="post-metadata">

**Author:** ![matt\_Kerg](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@matt\_Kerg](https://forum.inductiveautomation.com/u/matt_Kerg)\
**Post date:** [June 28, 2024, 3:49pm UTC](https://forum.inductiveautomation.com/t/toggle-switch-hiding-focus-box/92482/3 "2024-06-28T15:49:23Z")

</div>

Thanks