Change the default color of materialize.css input fields. I have attached screenshot
Solution 1
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;
}
Solution 2
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;
}
Solution 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";
Solution 4
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/
Related videos on Youtube
Dipayan Das
Updated on July 27, 2022Comments
-
Dipayan Das over 1 year
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>
-
Filburt almost 7 yearsPlease 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.
-
Dipayan Das almost 7 yearsHello Filburt, I have attached screenshot and marked it. Please check.
-
Dipayan Das almost 7 yearsCan you see screenshot now?
-
-
Pierre de LESPINAY almost 5 yearsThe thing is the primary color is supposed to be
materialize-red
but it's all green everywhere... That's quite confusing -
SyberKnight about 4 yearscurious: what's the "input:not([type])" for?