Material Design Lite Styling Inputfields

Question

I'm having some difficulties styling mdl-textfield. Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.

Effectively, this is my starting point, as taken from the component list.

https://jsfiddle.net/2aznyc4n/1/

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>

I am able to set the size and color of the floating label by adding into the label in the html

style="font-size:x-large; color:purple"

So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.

If all possible, I want to avoid having styling in my html.

I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.

score 2 · Answer 1 · answered Aug 25 '16 at 09:03

Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.

I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.

  .mdl-textfield{ input[type="text"]{ font-size: 24px; color: @color500;} }
  .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
    font-size: 14px;
    top: -5px; //Manages floating label fly
  }
  .mdl-textfield__label{ font-size: 24px; top: 20px; color: @color500;}

hr_117 · Answer 2 · 2016-05-04T20:10:35.913

0

Normally the customization should be done with the custom CSS theme builde.

But if you prefer to use your own css you should use !important.

.mdl-textfield__input {
   color: black !important;
 }

For the pleaceholder text you need to use vendor prefix CSS:

::-moz-placeholder {  /* Firefox 19+ */
 color: red !important;  
}

::-webkit-input-placeholder {
  color: red;

}

edited May 04 '16 at 20:10

answered May 04 '16 at 19:51

hr_117

9,589
1
18
23

score 0 · Answer 3 · edited May 23 '17 at 12:02

0

I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):

https://stackoverflow.com/a/43512625/1920145

Hope it helps many more people.

edited May 23 '17 at 12:02

Community

1
1

answered Apr 20 '17 at 07:51

DavidTaubmann

3,223
2
34
43

Material Design Lite Styling Inputfields

3 Answers3