如何禁用 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-switch__label中注入了"span.mdl-ripple"标签来达到效果。我们可以设置它的可见性来隐藏它而不影响布局。

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

How to disable ripple effect on getmdl's toggle?

javascript

css

togglebutton

material-design-lite