Как мне оформить цвет метки?

enter image description here

Следующий код не работает:

<style>
.mdc-floating-label{
   color: #808080;
}
.mdc-floating-label--float-above{
  color:  #808080;
}
.mdc-floating-label--shake{
  color:  #808080;
}
</style>
0
user4550164 3 Май 2019 в 11:02

4 ответа

Лучший ответ

Добавьте !important в конце значений цвета.

<style>
.mdc-floating-label{
   color: #808080 !important;
}
.mdc-floating-label--float-above{
  color:  #808080 !important;
}
.mdc-floating-label--shake{
  color:  #808080 !important;
}
</style>
0
OM PRAKASH 3 Май 2019 в 08:29

Вы должны избегать использования! Важно, так как это считается плохой практикой. Вместо этого вы можете придать своему классу больше веса с помощью чего-то вроде:

<style>
label.mdc-floating-label{
   color: #808080;
}
label.mdc-floating-label--float-above{
  color:  #808080;
}
label.mdc-floating-label--shake{
  color:  #808080;
}
</style>
2
Oussama Assassi 3 Май 2019 в 08:33

Тыр это:

.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;
}

Работает, но безобразно :(

Если кто-нибудь знает, как использовать API --float-above, пожалуйста, дайте мне знать ...

0
Mashiro 31 Окт 2019 в 21:01

Не добавляйте важно , потому что это не соответствует стандартному CSS. Добавьте родительскую иерархию классов, это определенно будет работать.

<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>
0
Hemangi Patel 3 Май 2019 в 09:15