javascript - 如何禁用 getmdl 切换的涟漪效应？

Question

我正在使用 getmdl.io 组件库，但我找不到禁用切换组件上的涟漪效应的方法。

我的 HTML 代码如下所示:

<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>   

Answer 1

尝试将此 css 添加到您的代码中:

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

似乎该库将“span.mdl-ripple”标签注入(inject)到您的 span.mdl-switch__label 中以达到效果。我们可以设置它的可见性来隐藏它而不影响布局。