Materialize表单输入点击时标签保持绿色的实现方法

Hey Mihai, 刚好我对Materialize的表单样式逻辑比较熟悉，这就帮你搞定这个标签颜色的问题！

Materialize默认会给聚焦状态的输入框标签应用主题的primary色（也就是你看到的蓝色），要让标签在所有状态下都保持绿色，我们只需要覆盖几个关键的CSS选择器就行。下面分两种方式给你方案：

方案一：全局覆盖所有表单标签（简单直接） #

如果想让所有表单输入框的标签都变成绿色，直接添加下面的CSS代码就行，记得把这段代码放在Materialize官方CSS文件之后加载，保证样式优先级：

/* 正常状态下的标签 */
.input-field label {
  color: #4caf50 !important; /* 这里用你想要的绿色值，#4caf50是Materialize的标准绿色 */
}

/* 输入框聚焦（点击）时的标签 */
.input-field input:focus + label {
  color: #4caf50 !important;
}

/* 输入框有内容时的标签（即使失去焦点也保持绿色） */
.input-field input:not(:placeholder-shown) + label {
  color: #4caf50 !important;
}

/* 可选：同时修改聚焦时下划线的颜色，保持风格统一 */
.input-field input:focus {
  border-bottom: 1px solid #4caf50 !important;
  box-shadow: 0 1px 0 0 #4caf50 !important;
}

方案二：局部指定表单（更优雅，避免全局污染） #

如果你只想让特定的输入框应用这个绿色标签样式，推荐给目标输入框的容器加一个自定义类，比如custom-green-input，这样不会影响其他表单：

HTML结构： #

<div class="input-field custom-green-input">
  <input id="email" type="email" class="validate">
  <label for="email">Email</label>
</div>

对应的CSS： #

/* 正常状态 */
.custom-green-input .input-field label {
  color: #4caf50;
}

/* 聚焦状态 */
.custom-green-input .input-field input:focus + label {
  color: #4caf50;
}

/* 有内容时的状态 */
.custom-green-input .input-field input:not(:placeholder-shown) + label {
  color: #4caf50;
}

/* 可选：修改聚焦时下划线颜色 */
.custom-green-input .input-field input:focus {
  border-bottom: 1px solid #4caf50;
  box-shadow: 0 1px 0 0 #4caf50;
}

这个方案不用加!important，通过自定义类提高选择器优先级，更符合CSS最佳实践。

你可以根据自己的需求选其中一种方案，替换#4caf50成你想要的绿色色值就行，比如Materialize的其他绿色变种#66bb6a（浅绿）或者#2e7d32（深绿）都可以。

内容的提问来源于stack exchange，提问作者Mihai Temian