MDL 浮动标签文本字段：更改其颜色
Posted
技术标签:
【中文标题】MDL 浮动标签文本字段：更改其颜色【英文标题】：MDL floating label textfields: changing its colour 【发布时间】：2021-12-02 19:35:49 【问题描述】：目前，我的 html 文件中的文本字段是蓝色的。有没有办法让它变红？谢谢。
这是 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Textfield Demo</title>
<!-- Import MDL libraries -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-red.min.css"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div class="mdl-cell--10-col" style="text-align:center; height:60vh">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="search-bar">
<label class="mdl-textfield__label" for="search-bar">Text...</label>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col"></div>
</div>
</div>
</main>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：如下更新您的 CSS，
.is-focused
color: #FD5155 !important;
.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: #FD5155 !important;
.mdl-textfield__input
border-color: #FD5155 !important;
【讨论】：
单击时显示的下划线仍然是蓝色的。另外，有没有可能和按钮一样的红色？ 当然@KenEly 将CSS文件复制到您的项目目录中并相应地更新颜色代码 这是您按钮的红色代码#fd5155 您必须将RGB代码rgb(33,150,243)替换为红色代码以上是关于MDL 浮动标签文本字段：更改其颜色的主要内容，如果未能解决你的问题，请参考以下文章