在mdl-textfield上更改颜色

时间:2017-02-23 16:14:24

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

是否有内置方法可以更改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>

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

2 个答案:

答案 0 :(得分:2)

这对我来说很有效:

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

答案 1 :(得分:1)

我在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}

然后我试图在网站上覆盖我的风格,只需更改&#34; 颜色&#34;它就可以了! css文件中有更多信息。 的 B)