html - 谷歌MDL文本字段焦点改变颜色

Question

我刚刚开始使用谷歌 Material 设计精简版。当你专注于这个标签时，我发现这个文本字段 float 。颜色是蓝色或海军蓝或我不知道。

问题是，我将链接颜色更改为靛蓝粉色

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

但是当我聚焦时，我的文本字段没有变为靛蓝色或粉红色。

问题很简单，怎么改？

我对此做了一些事情，但仍然没有运气。

HTML:

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample4">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
    <label class="mdl-textfield__label mdl-color-modifier" for="sample4">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

CSS:

div .mdl-textfield__label:after {
  background: pink;
}
.mdl-textfield--floating-label .is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
    color:pink;
}

.mdl-color-modifier:focus{
    color:pink;
}

我尝试使用伪 :focus 在其中应用一个新类，但它仍然没有运气。

Answer 1

我都有了。键是 :after 修饰符和 is-focused 类。只需将 #FAFAFA 替换为您的 indigo-pink 即可，它应该适合您。这只是概念证明。检查 fiddle 。它的文本标签也有颜色。

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

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

https://jsfiddle.net/90u6Lxc4/30/