如何禁用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纹波” 标签进入你的span.mdl-switch__label来达到效果。我们可以设置其可见性来隐藏它，而不会影响布局。