In case anyone is here in 2019 and trying this with the new version of Materialize (1.0.0) and not wanting to use !important in their css, the below snippet worked for me.
Note: This will apply to all input fields, if you want specific ones, i.e. text, then change [type] to [type=text].
/* Inactive/Active Default input field color */
.input-field input[type]:not([readonly]),
.input-field input[type]:focus:not([readonly]),
.input-field textarea:not([readonly]),
.input-field textarea:focus:not([readonly]) {
border-bottom: 1px solid #01579b;
box-shadow: 0 1px 0 0 #01579b;
}
/* Inactive/Active Default input label color */
.input-field input[type]:focus:not([readonly])+label,
.input-field textarea:focus:not([readonly])+label {
color: #01579b;
}
/* Active/Inactive Invalid input field colors */
.input-field input[type].invalid,
.input-field input[type].invalid:focus,
.input-field textarea.invalid,
.input-field textarea.invalid:focus {
border-bottom: 1px solid #e57373;
box-shadow: 0 1px 0 0 #e57373;
}
/* Active/Inactive Invalid input label color */
.input-field input[type].invalid:focus+label,
.input-field input[type].invalid~.helper-text::after,
.input-field input[type].invalid:focus~.helper-text::after,
.input-field textarea.invalid:focus+label,
.input-field textarea.invalid~.helper-text::after,
.input-field textarea.invalid:focus~.helper-text::after {
color: #e57373;
}
/* Active/Inactive Valid input field color */
.input-field input[type].valid,
.input-field input[type].valid:focus,
.input-field textarea.valid,
.input-field textarea.valid:focus {
border-bottom: 1px solid #26a69a;
box-shadow: 0 1px 0 0 #26a69a;
}
/* Active/Inactive Valid input label color */
.input-field input[type].valid:focus+label,
.input-field input[type].valid~.helper-text::after,
.input-field input[type].valid:focus~.helper-text::after,
.input-field textarea.valid:focus+label,
.input-field textarea.valid~.helper-text::after,
.input-field textarea.valid:focus~.helper-text::after {
color: #26a69a;
}
Snippet
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style type="text/css">
.input-field input[type]:not([readonly]),
.input-field input[type]:focus:not([readonly]),
.input-field textarea:not([readonly]),
.input-field textarea:focus:not([readonly]) {
border-bottom: 1px solid #01579b;
box-shadow: 0 1px 0 0 #01579b;
}
.input-field input[type]:focus:not([readonly])+label,
.input-field textarea:focus:not([readonly])+label {
color: #01579b;
}
.input-field input[type].invalid,
.input-field input[type].invalid:focus,
.input-field textarea.invalid,
.input-field textarea.invalid:focus {
border-bottom: 1px solid #e57373;
box-shadow: 0 1px 0 0 #e57373;
}
.input-field input[type].invalid:focus+label,
.input-field input[type].invalid~.helper-text::after,
.input-field input[type].invalid:focus~.helper-text::after,
.input-field textarea.invalid:focus+label,
.input-field textarea.invalid~.helper-text::after,
.input-field textarea.invalid:focus~.helper-text::after {
color: #e57373;
}
.input-field input[type].valid,
.input-field input[type].valid:focus,
.input-field textarea.valid,
.input-field textarea.valid:focus {
border-bottom: 1px solid #26a69a;
box-shadow: 0 1px 0 0 #26a69a;
}
.input-field input[type].valid:focus+label,
.input-field input[type].valid~.helper-text::after,
.input-field input[type].valid:focus~.helper-text::after,
.input-field textarea.valid:focus+label,
.input-field textarea.valid~.helper-text::after,
.input-field textarea.valid:focus~.helper-text::after {
color: #26a69a;
}
</style>
</head>
<body>
<div class="input-field">
<input id="email" name="email" type="email" class="validate" required="required" autofocus>
<label for="email">Email</label>
<span class="helper-text" data-error="Must be a valid email" data-success="Perfect!"></span>
</div>
</div>
<div class="row">
<div class="input-field">
<input id="password" name="password" type="password"class="validate" required="required" minlength="6">
<label for="password">Password</label>
<span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span>
</div>
</div>
<div class="row">
<div class="input-field">
<textarea id="textarea" name="textarea" class="materialize-textarea validate" required="required" minlength="6"></textarea>
<label for="textarea">Textarea</label>
<span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span>
</div>
</div>
</body>