MDL 浮动标签文本字段：更改其颜色答案

【问题标题】：MDL floating label textfields: changing its colourMDL 浮动标签文本字段：更改其颜色
【发布时间】：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>

【问题讨论】：

标签： html colors textfield material-design-lite

【解决方案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)替换为红色代码