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 浮动标签文本字段:更改其颜色的主要内容,如果未能解决你的问题,请参考以下文章

在点击其各自的父项(列表视图的项目)后,如何更改标签的文本颜色?

如何改变TextInputLayout的浮动标签颜色

如何更改选项标签中特定文本的颜色

如何根据背景颜色自动更改视图的透明颜色

使用必填字段验证器更改文本框颜色。请不要扩展器控制

更改自定义文本字段背景颜色和文本颜色IOS Swift