如何在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;
}

似乎图书馆注入＆＃34; span.mdl-ripple＆＃34;标记到你的span.mdl-switch__label中以达到效果。我们可以设置其可见性以隐藏它而不会影响布局。