MDC: How to style label text?

Question

How do I style label color?

The following code doesn't work:

<style>
.mdc-floating-label{
   color: #808080;
}
.mdc-floating-label--float-above{
  color:  #808080;
}
.mdc-floating-label--shake{
  color:  #808080;
}
</style>

Try adding `!important` at the end of color value. – OM PRAKASH May 03 '19 at 08:07 — OM PRAKASH, May 03 '19 at 08:07

score 2 · Answer 1 · answered May 03 '19 at 08:33

You should avoid using !important as it's considered as a bad practice. Instead you can give your class more weight with something like:

<style>
label.mdc-floating-label{
   color: #808080;
}
label.mdc-floating-label--float-above{
  color:  #808080;
}
label.mdc-floating-label--shake{
  color:  #808080;
}
</style>

score 0 · Answer 2 · answered May 03 '19 at 09:15

Do not add !important because it is not as per standard css. Add parent class hierarchy it will definitely work.

<style>
.mdc-text-field label.mdc-floating-label{
  color: #808080;
}
.mdc-text-field label.mdc-floating-label--float-above{
 color:  #808080;
}
.mdc-text-field label.mdc-floating-label--shake{
 color:  #808080;
}
</style>

score 0 · Answer 3 · answered Oct 31 '19 at 21:01

Tyr this:

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: orange;
}
.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-floating-label::after,
.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after {
  color: orange;
}

It works, but ugly :(

If any one know how to use --float-above API, please let me know...

score 0 · Answer 4 · answered Sep 08 '21 at 08:59

In your .css file you have to add/change this rows:

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input,
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: rgba(255, 255, 255, 0.87);
}

.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text,
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: rgba(255, 255, 255, 0.6);
}

.mdc-text-field .mdc-text-field__input {
  caret-color: white;
  caret-color: var(--mdc-theme-surface, white);
}

.mdc-text-field--filled .mdc-line-ripple::after {
  border-bottom-color: white;
  /* @alternate */
  border-bottom-color: var(--mdc-theme-surface, white);
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: white;
    /* @alternate */
    border-color: var(--mdc-theme-surface, white);
}

You can change the white color with your favorite color but keep in mind to change the var --mdc-theme-surface as well. I tried this solution with Material Component version 11.0.0 and 12.0.0

score -1 · Accepted Answer · answered May 03 '19 at 08:29

-1

Add !important at the end of color values.

<style>
.mdc-floating-label{
   color: #808080 !important;
}
.mdc-floating-label--float-above{
  color:  #808080 !important;
}
.mdc-floating-label--shake{
  color:  #808080 !important;
}
</style>

answered May 03 '19 at 08:29

OM PRAKASH

393
1
5
20

MDC: How to style label text?

5 Answers5