Material Design Lite 动态改变颜色答案

【问题标题】：Material Design Lite dynamically change colorMaterial Design Lite 动态改变颜色
【发布时间】：2016-10-14 09:20:45
【问题描述】：

我正在为我的网络应用程序使用 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>

【问题讨论】：

你可以展示MDL如何实现一个文本字段？
@XZKS 我用例子编辑过
检查 chrome 中的 webtool 并设置 :focus on that 并添加 !important 以确保 :)
@Medda86 不幸的是，我什至不确定要设置什么属性或如何设置它
@tommy.bonderenka 不确定您是否已经检查过，但我更新了我的答案，仅供参考，有点完整:)

标签： javascript css material-design material-design-lite

【解决方案1】：

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

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

【讨论】：

这正是我想要的！谢谢！
你知道如何改变文字颜色吗？这创造了奇迹，但我在这里需要帮助。 jsfiddle.net/90u6Lxc4/5 让它在点击后变成白色，而不是像@RonRoyston 为我做的那样一直变白。
@BillyFerguson 你是指标签文本还是输入文本？
点击输入时当前为深蓝色的浮动标签文本。
@BillyFerguson .mdl-textfield.is-focused .mdl-textfield__label { color: #FAFAFA; } jsfiddle.net/yuriy636/vey6081L

【解决方案2】：

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

mdl-color-text--yellow-500

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

【讨论】：

【解决方案3】：

因为您使用的是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

【讨论】：

这在一定程度上是有效的 - 但现在我得到了我的自定义颜色和我的原色都在文本输入字段下划线
想分享一个链接来帮助你吗？
不幸的是，我真的没有办法做到这一点。我确实注意到您使用的是 Materialize 而不是 MDL，所以我假设这与它有关。
是的，我刚刚查看了文档 - 确实略有不同，但很接近！
@tommy.bonderenka 好的，让我看看 MDL 文档..我会尽快回复你