p-dropdown如何根据ng-invalid和focus选项更改边框颜色和阴影

Question

嗨，我需要做的是看到红色的p-dropdown边框表示没有选择任何所需的值。因此需要字段，边框为红色（不需要ng-dirty或ng-touching applid）。然后，当我点击下拉菜单时，我想在此边框周围看到红色阴影突出显示。当我点击离开时，我需要这个阴影动画或如何将其称为“消失”，但仍保持红色边框下拉。最后，当我选择价值时，我不再需要红色边框了。

- 在任何操作和任何点击下拉列表之前

- 这是点击这个字段后的样子。

- 最终状态都好。

所有代码都是从原始的primeng页面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>

在其他一些stackowerflo上，他们建议在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;
}

请问怎么做？

Answer 1

解决了：

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