Material Design Lite动态改变颜色

Question

我正在使用Material Design Lite（getmdl.io）作为我的网络应用程序。我有一个浮动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而不是常规的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>

这是一个已经存在的qazxsw poi，有各种可能的颜色

你总是可以建立自己的主题Codepen

Answer 2

here

不确定

.mdl-textfield__label:after{
    background-color: #3f51b5 !important;
}

是否必要，但在修改CSS框架时它会派上用场。

Answer 3

您可以更改浮动文本的颜色。无需破解背景颜色。这是您可用的颜色（和MDL代码） - !important。

https://rack.pub/swatch

mdl-color-text--yellow-500