p-раскрывающийся список, как изменить цвет границы и тени на основе параметров ng-invalid и focus - PullRequest
Новая
       10

p-раскрывающийся список, как изменить цвет границы и тени на основе параметров ng-invalid и focus

3 голосов
/ 18 марта 2019

Привет, что мне нужно сделать, это увидеть р-ниспадающую границу красного цвета, сигнализирующую о том, что никакое требуемое значение не выбрано.Таким образом, поле обязательно для заполнения, граница красного цвета (без необходимости использования ng-dirty или ng-touch).Затем, когда я нажимаю на выпадающее меню, я хочу видеть подсветку красной тени вокруг этой границы.Когда я щелкаю прочь, мне нужна эта теневая анимация или как ее назвать неактивной, но оставаясь выпадающим в красной рамке.И, наконец, когда я выбираю значение, мне больше не нужна красная рамка.

enter image description here - перед любым действием и любым щелчком по раскрывающемуся списку

enter image description here - так должно выглядеть после нажатия на это поле.

enter image description here - окончательное состояние все в порядке.

Весь код скопированот оригинальной страницы https://www.primefaces.org/primeng/#/dropdown для простого теста выпадающего меню.

<div class="container">
  <div class="row">
    <div class="col-sm-10">
      <h3 class="first">Single</h3>
      <p-dropdown [options]="cities" [(ngModel)]="selectedCity"  placeholder="Select a City" optionLabel="name"
                  [showClear]="true" **required**></p-dropdown>
      <p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

    </div>
  </div>
</div>

На некоторых других стеках они советуют делать это в css. 

p-dropdown.ng-invalid:not(form) > div {
  border: 5px solid red; /* red */
}

p-dropdown.ng-valid[required], p-dropdown.ng-valid.required {
  border: 0 none;
}


p-dropdown.ng-invalid:not(form) {
  border: 0 none;
}

Как это сделать, пожалуйста?

1 Ответ

2 голосов
/ 20 марта 2019

решено: 

 p-dropdown.ng-invalid:not(form) > div {
    border: 1px solid #D40000;
  }

  p-dropdown.ng-invalid.ng-touched.ui-inputwrapper-focus:not(form) > div {
    box-shadow: 0 0 0 0.05em #F40000;
    border: 1px solid #D40000;
    border-radius: 2px;
  }

  p-dropdown.ng-invalid.ng-untouched.ui-inputwrapper-focus:not(form) > div {
    box-shadow: 0 0 0 0.05em #F40000;
    border: 1px solid #D40000;
    border-radius: 2px;
  }
...