javascript - Material Design Lite 动态改变颜色

Question

我正在为我的网络应用程序使用 Material Design Lite ( getmdl.io )。我有一个带有 float label;

的文本框

我想将文本字段的下划线颜色更改为自定义颜色，而不是我定义为主要颜色的颜色(聚焦文本框时出现的线条)。

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

编辑:

这是 MDL 文本字段的实现方式，但一些 JS 用于在底部做动态下划线。

您还可以查看动态示例 here

<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而不是常规的 Materialize.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具有所有可能的颜色

您始终可以构建自己的主题 here