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，并且通过一些测试，该行来自此脚本：

MDL提供了19种可能的颜色，您可以将toList添加到要更改元素的类中。

但这是元素中的<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>，在这种情况下，它应用于伪元素--color，因此您可以根据需要使用颜色background-color

::after

teal

这是一个已存在的Codepen，其中包含所有可能的颜色

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

Answer 2

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

不确定是否需要!important，但在修改CSS框架时它会派上用场。

Answer 3

您可以更改浮动文本的颜色。无需破解背景颜色。这是您可用的颜色（和MDL代码） - https://rack.pub/swatch。

mdl-color-text--yellow-500

https://codepen.io/rhroyston/pen/YWVBkJ

Material Design Lite动态改变颜色

3 个答案: