Material Design Lite 动态改变颜色
Material Design Lite dynamically change color
我正在为我的网络应用程序使用 Material Design Lite (getmdl.io)。我有一个带有浮动 label
;
的文本框
我想将文本字段的下划线颜色更改为自定义颜色,而不是我定义为主要颜色的颜色(聚焦文本框时出现的线条)。
如何通过 CSS 或 Javascript 更改此颜色?
编辑:
这就是MDL文本字段的实现方式,但是一些JS用于在底部做动态下划线。
您还可以查看动态示例here
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
因为您使用的是 MDL 而不是常规的 Materialize.CSS,并且通过一些测试,该行来自此脚本:
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
MDL 提供了 19 种可能的颜色,您可以通过将 --color
添加到要更改的元素的 class 来获得这些颜色。
但那是针对元素中的 background-color
,在本例中它应用于伪元素 ::after
,因此您可以根据需要使用颜色 teal
div .mdl-textfield__label:after {
background: teal
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
这是一个已经存在的Codepen,具有所有可能的颜色
您可以随时构建自己的主题here
.mdl-textfield__label:after{
background-color: #3f51b5 !important;
}
不确定是否需要 !important
,但在修改 CSS 框架时它会派上用场。
您可以更改浮动文本的颜色。无需破解背景颜色。这是您可用的颜色(和 MDL 代码)- https://rack.pub/swatch.
mdl-color-text--yellow-500
我正在为我的网络应用程序使用 Material Design Lite (getmdl.io)。我有一个带有浮动 label
;
我想将文本字段的下划线颜色更改为自定义颜色,而不是我定义为主要颜色的颜色(聚焦文本框时出现的线条)。
如何通过 CSS 或 Javascript 更改此颜色?
编辑:
这就是MDL文本字段的实现方式,但是一些JS用于在底部做动态下划线。
您还可以查看动态示例here
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
因为您使用的是 MDL 而不是常规的 Materialize.CSS,并且通过一些测试,该行来自此脚本:
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
MDL 提供了 19 种可能的颜色,您可以通过将 --color
添加到要更改的元素的 class 来获得这些颜色。
但那是针对元素中的 background-color
,在本例中它应用于伪元素 ::after
,因此您可以根据需要使用颜色 teal
div .mdl-textfield__label:after {
background: teal
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
这是一个已经存在的Codepen,具有所有可能的颜色
您可以随时构建自己的主题here
.mdl-textfield__label:after{
background-color: #3f51b5 !important;
}
不确定是否需要 !important
,但在修改 CSS 框架时它会派上用场。
您可以更改浮动文本的颜色。无需破解背景颜色。这是您可用的颜色(和 MDL 代码)- https://rack.pub/swatch.
mdl-color-text--yellow-500