Question

我刚开始使用谷歌材料设计精简版。当你专注于这个标签时，我发现这个文本字段是浮动的。颜色是蓝色或海军蓝或者idk。

问题是，我将链接颜色改为这种颜色的靛蓝粉红色

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

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

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中扣除了答案。

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

2 个答案: