Change the default color of materialize.css input fields. I have attached screenshot

Question

Please see attachment

I have tried to add custom css, but not worked. I need to change the color of text after selecting the input fields.

<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>

Please [edit] your post and add the relevant code - otherwise it will be hard to tell what you need to change to get the desired result. — Filburt, Jul 06 '17 at 07:31
Hello Filburt, I have attached screenshot and marked it. Please check. — Dipayan Das, Jul 06 '17 at 07:35
@DipayanDas How should we identify the class/id of the input field from a screenshot? — Filburt, Jul 06 '17 at 07:42
If you think the solution may be useful for other people, please add your solution as an answer (you can self-answer your question), and accept the answer. — , Jul 06 '17 at 22:56
Hi I have added solutions in answer. Please see. Thank you :) — Dipayan Das, Jul 08 '17 at 13:47

score 5 · Answer 1 · edited Oct 03 '19 at 05:59

5

An easier way, though you should edit the SCSS files. But if you want in quick then use the following css. I have used royalblue color here, you can use any hex color.

For bottom border

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

For label color

label.active {
  color: royalblue !important;
}

edited Oct 03 '19 at 05:59

codyfraley

99
3
12

answered Oct 14 '18 at 16:22

Truly

374
4
4

score 3 · Answer 2 · answered Aug 16 '18 at 20:50

For the line color, I was able to change the default green to black with the css below.

input:not([type]):focus:not([readonly]), input[type="text"]:not(.browser-default):focus:not([readonly]), input[type="password"]:not(.browser-default):focus:not([readonly]), input[type="email"]:not(.browser-default):focus:not([readonly]), input[type="url"]:not(.browser-default):focus:not([readonly]), input[type="time"]:not(.browser-default):focus:not([readonly]), input[type="date"]:not(.browser-default):focus:not([readonly]), input[type="datetime"]:not(.browser-default):focus:not([readonly]), input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), input[type="tel"]:not(.browser-default):focus:not([readonly]), input[type="number"]:not(.browser-default):focus:not([readonly]), input[type="search"]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid black;
    -webkit-box-shadow: 0 1px 0 0 black;
    box-shadow: 0 1px 0 0 black;
}

curious: what's the "input:not([type])" for? – SyberKnight Apr 04 '20 at 21:45 — SyberKnight, Apr 04 '20 at 21:45

score 3 · Answer 3 · answered May 02 '19 at 15:46

3

This green is actually $secondary-color

So in SASS, here is how it can be changed:

$secondary-color: #FEBD09;

@import "materialize-css/sass/components/variables";

answered May 02 '19 at 15:46

Pierre de LESPINAY

44,700
57
210
307

score 2 · Answer 4 · edited Aug 05 '18 at 04:55

2

When using Sass, you can change the color scheme of your site extremely quickly.

To change the style of input/form you will only have to modify the variables under 10. Forms: https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss

After changing the values, you need to build the new CSS file using SASS command line

Also check out: http://materializecss.com/sass.html, http://sass-lang.com/

edited Aug 05 '18 at 04:55

Yash

3,438
2
17
33

answered Jul 09 '17 at 06:59

flosommerfeld

634
2
11
23

The thing is the primary color is supposed to be `materialize-red` but it's all green everywhere... That's quite confusing – Pierre de LESPINAY May 02 '19 at 15:31

score 0 · Answer 5 · edited Aug 16 '18 at 20:52

This is the CSS, you can change colors of materialize input animated text

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 */

}

score 0 · Answer 6 · answered Sep 30 '17 at 07:00

You can change the text color easily by changing the code like

<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">
<span class="black-text">First Name</span>
</label>
</div>

That is append -text to the color class. Check : http://materializecss.com/color.html

Change the default color of materialize.css input fields. I have attached screenshot

6 Answers6

Linked