Material Design Lite动态改变颜色

Question

我正在使用Material Design Lite(getmdl.io)作为我的网络应用程序.我有一个漂浮的文本框label;

我想将文本字段的下划线颜色更改为自定义颜色,而不是我定义为主要颜色的颜色(聚焦文本框时显示的行).

如何通过CSS或Javascript更改此颜色？

编辑:

这是MDL文本字段的实现方式,但是一些JS用于在底部执行动态下划线.

您还可以在此处查看动态示例

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>

Answer 1

因为您使用的是MDL而不是常规的Materialise.CSS,并且通过一些测试,该行来自此脚本:

<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

MDL提供了19种可能的颜色,您可以通过添加--color到要更改的元素的类来获得颜色.

但这是background-color在元素中,在这种情况下它应用于伪元素::after,因此您可以使用自定义颜色,如您所愿使用颜色teal

div .mdl-textfield__label:after {
  background: teal
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>

这是一个已经存在的Codepen,具有所有可能的颜色

你总是可以在这里建立自己的主题