在 mdl-textfield 上更改颜色答案

【问题标题】：Change color on mdl-textfield在 mdl-textfield 上更改颜色
【发布时间】：2017-07-14 05:45:00
【问题描述】：

是否有内置方法可以更改 Material Design Lite text field 的颜色？特别是，使用文本字段之前的默认文本和下划线。在下面的示例中，“文本...”和下划线默认为灰色。我需要它们是白色的，因为我使用的是深色背景。

<!-- Simple Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>

我不想在选择文本字段后更改文本或下划线的颜色，只在未使用文本字段时更改文本和下划线。

【问题讨论】：

标签： html css material-design textfield material-design-lite

【解决方案1】：

对我来说这很有效：

.mdl-textfield__label:after {
    background-color: white !important;
}

【讨论】：

【解决方案2】：

我在css库文件中找到了一些代码，如下所示：

.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:#3f51b5;font-size:12px;top:4px;visibility:visible}

然后我尝试在网站中覆盖我的样式，只需更改“color”，它就可以了！在 css 文件中有更多信息。 B)

【讨论】：

【解决方案3】：

只需覆盖默认样式表：

.mdl-textfield__input{
    border-bottom: 1px solid #fff;
}

.mdl-textfield__label{
    color: #fff;
}

【讨论】：