How do I hide the select circle after toggling a switch?

[M1ke]

Hey guys,

I have this problem for a long time but still cannot find a solution. Hopefully some of you can help me out!

This grey-ish circle stays visible until I press somewhere else and I’d like to remove it completely.

By adding this:

switch-checked-color: “hsla(0, 0%, 0%, 0.0)”

to my theme, I was able to hide the “on-toggle”-circle, but the logical equivalent:

switch-unchecked-color: “hsla(0, 0%, 0%, 0.0)”

doesn’t change anything.

Thank you very much in advance!

[AhmadK (akasma74)]

I don’t know how to turn it off globally but this code allows me to get rid of the circle of an individual input_boolean

type: entities
title: Test
entities:
  - entity: input_boolean.test
    style:
      ha-entity-toggle:
        $:
          ha-switch:
            $: '.mdc-switch__thumb-underlay {--mdc-ripple-fg-size: 0px !important}'

[M1ke]

Thank you so much! Working like a charm

[M1ke]

Hey man, here’s how to get rid of it globally. Put this in a theme:

mdc-ripple-color: "transparent"