更改 mdl-textfield 的颜色
Change color on mdl-textfield
是否有内置方法可以更改 Material Design Lite text field 的颜色?特别是,使用文本字段之前的默认文本和下划线。在下面的示例中,"Text..." 和下划线默认为灰色。我需要它们是白色的,因为我使用的是深色背景。
<!-- 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>
我不想在选择文本字段后更改文本或下划线的颜色,只想在未使用文本字段时更改文本和下划线。
只需覆盖默认样式表:
.mdl-textfield__input{
border-bottom: 1px solid #fff;
}
.mdl-textfield__label{
color: #fff;
}
我在 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)
对我来说这很有效:
.mdl-textfield__label:after {
background-color: white !important;
}
是否有内置方法可以更改 Material Design Lite text field 的颜色?特别是,使用文本字段之前的默认文本和下划线。在下面的示例中,"Text..." 和下划线默认为灰色。我需要它们是白色的,因为我使用的是深色背景。
<!-- 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>
我不想在选择文本字段后更改文本或下划线的颜色,只想在未使用文本字段时更改文本和下划线。
只需覆盖默认样式表:
.mdl-textfield__input{
border-bottom: 1px solid #fff;
}
.mdl-textfield__label{
color: #fff;
}
我在 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)
对我来说这很有效:
.mdl-textfield__label:after {
background-color: white !important;
}