Change color of underline input and label in Materialize.css framework

The dippas answer is correct, but if you want textareas to be the same colour you have to set this CSS rules:

/* label focus color */
    .input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
     color: #005eed !important;
    }

/* label underline focus color */
    .input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
     border-bottom: 1px solid #005eed !important;
     box-shadow: 0 1px 0 0 #005eed !important;
    }

Note the .materialize-textarea rule for label and border bottom.

You can, according to Materialize Docs by using:

 /* label focus color */
   .input-field input[type=text]:focus + label {
     color: #000;
}
/* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid #000;
     box-shadow: 0 1px 0 0 #000;
   }

Snippet

/*** !important was needed for snippet ***/



/* label focus color */
 .input-field input:focus + label {
   color: red !important;
 }
 /* label underline focus color */
 .row .input-field input:focus {
   border-bottom: 1px solid red !important;
   box-shadow: 0 1px 0 0 red !important
 }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">account_circle</i>
        <input id="icon_prefix" type="text" class="validate">
        <label for="icon_prefix">First Name</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">phone</i>
        <input id="icon_telephone" type="tel" class="validate">
        <label for="icon_telephone">Telephone</label>
      </div>
    </div>
  </form>
</div>

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>

finally, I found the solution. You need to change the color for active and not active.

ICONS:

.material-icons{
  color: #1a237e !important;
  }

.material-icons.active {
  color: #b71c1c !important;
  }

TEXT-FIELD:

.input-field input[type=text] + label, .materialize-textarea:focus:not([readonly]) + label {
 color: #1a237e !important;
}

.input-field input[type=text], .materialize-textarea:focus:not([readonly]) {
 border-bottom: 1px solid #1a237e !important;
 box-shadow: 0 1px 0 0 #1a237e !important;
}


.input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
 color: #b71c1c !important;
}

.input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
 border-bottom: 1px solid #b71c1c !important;
 box-shadow: 0 1px 0 0 #b71c1c !important;
}

Change color of underline input and label in Materialize.css framework

Snippet

Snippet

Tags:

Html

Css

Materialize

Related

Recent Posts