Поменять цвет label у инпутов в зависимости от value. Quasar
Существует проект на Vue 3 + Quasar. Необходимо при отсутствии значения в инпутах (текст, селект и тд) менять цвет лейбла. В квазаре цвет лейблов можно переопределить классом.
.q-field__label {
@include text--header-4;
color: $c-new-gray;
}
Таким образом для всех лейблов в проекте задан цвет и стили шрифта. Существует ли способ в SCSS менять цвет лейблов при отсутствии значения в инпутах? Возможно, какое то Quasar свойство или класс?
Существуют css селекторы типо :valid и так далее, но в моем случае, насколько я понял, они не очень мне подходят, так как они привязаны именно к валидации полей.
Ответы (1 шт):
Стоило задать вопрос, как я нашел решение. Ответ от Berend поражает своей простотой и лаконичностью.
В двух словах решение. 
На скрине выше классы Quasar для текст инпута. q-field__native для стилей самого инпута и q-field__label для стилей лейбла. Таким образом мы просто проверяем показывается ли placeholder в первом классе и в зависимости от этого задаем стиль для лейбла.
КОД
//label color for empty value
.q-field__native:placeholder-shown + .q-field__label {
color: $c-new-gray--darkest;
}