Search code examples
javascriptcsstogglebuttonmaterial-design-lite

How to disable ripple effect on getmdl's toggle?

I'm using getmdl.io component library, and I can't find a way to disable ripple effect on toggle component.

My HTML code looks like this:

<label class="mdl-switch mdl-js-switch" for="switch-1" id='switch-main'>
        <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
        <span class="mdl-switch__label"></span>
</label>
Solution

  • Try to add this css into your code:

    //for checkoox:
.mdl-ripple{
    visibility: hidden !important;
}
//for switch
.mdl-switch__input{
    visibility: hidden !important;
}

    It seems that the library injects "span.mdl-ripple" tag into your span.mdl-switch__label to achieve the effect. We can set its visibility to hide it without impacting the layout.