Html google MDL textfield focus更改颜色

我刚刚开始这个谷歌材料设计lite。当你聚焦在这个标签上时，我发现这个文本字段是浮动的。颜色为蓝色、海军蓝或idk

问题是，我把链接的颜色改成了靛粉色

<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">

---

我试图用pseudo:focus在其中应用一个新类，但它仍然没有成功。

我相信另一个解决方案是这样的，它对我有效：

.mdl-textfield__input:focus {
    border-bottom-color: red;
    box-shadow: 0 1px 0 0 red;
}

---

我从中扣除了答案。

我都有了。键是

：after

修饰符，

是焦点类。只需将
#FAFAFA
替换为你的
靛蓝粉
，它应该适合你。这只是概念的证明。检查小提琴。它的文本标签也是彩色的

.mdl-textfield.is-focused .mdl-textfield__label {
    color: #FAFAFA;
}

.mdl-textfield__label:after{
    background-color: #FAFAFA;
}

您是指聚焦时底部边框切换到的颜色吗？我相信这与javascript有关，因为：focus Pseudo上设置的颜色会立即应用于元素，但在它上面，来自中心的动画仍然会重新绘制边框，甚至会覆盖！重要属性检查我的示例。应该对你有用。将#FAFAFA改为#@BillyFerguson它在工作，我可以清楚地看到它，也许你看不到区别，因为背景颜色是白色的。只需改变颜色。啊，去掉你的引导链接。如果你移除引导，它会覆盖getmdl文本字段上的一些道具，并做一些不可靠的事情。不管怎样，它只有两行，如果你在-focus CSS中添加“bottom:5px；”，你仍然会看到两行。是的。我说的更多的是第一个例子中的两行是如何对齐的。无需更改任何代码，只需删除JSFIDLE中的引导导入，即可修复错误对齐。我同意你所说的是正确的，事实上，它们是两条独立的线。
.mdl-textfield__input:focus {
    border-bottom-color: red;
    box-shadow: 0 1px 0 0 red;
}

.mdl-textfield.is-focused .mdl-textfield__label {
    color: #FAFAFA;
}

.mdl-textfield__label:after{
    background-color: #FAFAFA;
}