更改materialize.css输入字段的默认颜色。我已附上截图

Question

我尝试添加自定义CSS，但是没有用。选择输入字段后，我需要更改文本的颜色。

<div class="input-field form-group">
    <input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
    <label for="first_name" class="mat-label">First Name</label>
</div>

Answer 1

一种更简单的方法，但您应该编辑 SCSS 文件。但是如果你想快速使用下面的css。我在这里使用了 Royalblue 颜色，您可以使用任何十六进制颜色。

对于底部边框

input:focus {
  border-bottom: 1px solid royalblue !important;
  box-shadow: 0 1px 0 0 royalblue !important;
}

对于标签颜色

label.active {
  color: royalblue !important;
}

Answer 2

这是CSS，您可以更改物化输入动画文本的颜色

input:not([type]):focus:not([readonly])+label,.form-wrap input[type=text]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=password]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=email]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=url]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=time]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=date]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=datetime]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=tel]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=number]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=search]:not(.browser-default):focus:not([readonly])+label,.form-wrap textarea.materialize-textarea:focus:not([readonly])+label{

    color: #4285F4; /* after animation color change css */

}

.form-wrap input:focus:not([type]):not([readonly]),.form-wrap input[type="text"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="password"]:focus:not(.browser-default):not([readonly]), input[type="email"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="url"]:focus:not(.browser-default):not([readonly]), input[type="time"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="date"]:focus:not(.browser-default):not([readonly]), input[type="datetime"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="datetime-local"]:focus:not(.browser-default):not([readonly]), input[type="tel"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="number"]:focus:not(.browser-default):not([readonly]), input[type="search"]:focus:not(.browser-default):not([readonly]),.form-wrap textarea.materialize-textarea:focus:not([readonly]){

    border-bottom: 1px solid #4285F4;
    box-shadow: 0 1px 0 0 #4285F4; /* after animation color change css */

}