Попытка стирать текст ввода vaadin-date-picker

Question

Я хочу изменить цвет входного текста на красный, когда сборщик дат находится в классе элемента «has-Error».

Ниже приведен пример того, что я пытался на моей странице index.html, но не имел никакого эффекта:

<style is="custom-style"> 
     :root { 
      --primary-color: #1ab394; 
      --light-primary-color: var(--paper-teal-100); 
     } 
     html { 
      .has-error { 
       --paper-input-container-label: { color: red } 

      } 
      --paper-input-container-label: { font-size: 12px } 
      --paper-input-container-label-focus: { font-size:12px; font-weight:500 } 
      --paper-input-container-input: { font-size:12px } 
      --vaadin-date-picker-overlay: { max-height:400px } 
     } 
    </style> 

Похоже, дата-подборщик использует бумагу-вход, но я не могу выяснить, как применять стиль условно.

(Click link for example picture) - When looking at the picture example, I would like to have 'Choose Date' in red.

редактировать: Я добавил HTML:

[ngClass]="{'has-error':hasErrors('value')}" class="form-group md-form-group"> 
<vaadin-date-picker [disableCond]="" [formControl]="" label=""></vaadin-date-picker> 

Answer 1

Я не знаю, если я хорошо понимаю ваш вопрос, но с HTML кодом, было бы проще.

Случай 1

Пусть говорят, ваш HTML код выглядит следующим образом:

<div class="has-error"> 
    <vaadin-date-picker id="datePicker"></vaadin-date-picker> 
</div> 

Ваш CSS код будет выглядеть следующим образом:

.has-error vaadin-date-picker{ 
    --paper-input-container-label:{ 
      color:red; 
    } 
} 

ИЛИ

.has-error #datePicker{ 
    --paper-input-container-label:{ 
      color:red; 
    } 
} 

Случай 2

Если ваш HTML выглядит следующим образом:

<vaadin-date-picker class="has-error"></vaadin-date-picker> 

CSS:

.has-error{ 
    --paper-input-container-label:{ 
      color:red; 
    } 
}