google MDL文本字段焦点以更改颜色

Question

我刚刚开始这个google material design lite。当你在这个标签上聚焦时，我发现这个文本字段是浮动的。颜色是蓝色、海军蓝或深蓝色。

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

<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;
}

我尝试在其中应用一个新的类，但它仍然没有成功。

Answer 1

我什么都有。键是:after修饰符和is-focused类。只需将#FAFAFA替换为您的indigo-pink，它应该可以为您工作。这只是概念的证明。检查一下小提琴。它的文本标签也是彩色的。

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

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

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

Answer 2

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

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

我从here中推断出了答案。