title: p-dropdown how to change border colour and shadow based on ng-invalid and focus options
body: <p>Hi what I need to do is to see p-dropdown border in red colour signaling that no any required value has been chosen. So field is required, border is red (no ng-dirty or ng-touched applid not necessary). Then when I click on the dropdown menu, I want to see red shadow highlight around this border. When I click away I need this shadow animation or how to call it disepeare but remain dropdown in red border. And finally when I choose value I don´t need anymore red border.</p>
  
  <p><a href="https://i.stack.imgur.com/1pKpY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1pKpY.jpg" alt="enter image description here"></a> - Before any action and any click on dropdown</p>
  
  <p><a href="https://i.stack.imgur.com/UAFbB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UAFbB.jpg" alt="enter image description here"></a> - this is how it should look like after clicking on this field.</p>
  
  <p><a href="https://i.stack.imgur.com/sEBTe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sEBTe.jpg" alt="enter image description here"></a> - final state all ok.</p>
  
  <p>All code has been copied from original primeng page <a href="https://www.primefaces.org/primeng/#/dropdown" rel="nofollow noreferrer">https://www.primefaces.org/primeng/#/dropdown</a> for simple dropdown menu test. </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;h3 class="first"&gt;Single&lt;/h3&gt;
        &lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity"  placeholder="Select a City" optionLabel="name"
                    [showClear]="true" **required**&gt;&lt;/p-dropdown&gt;
        &lt;p&gt;Selected City: {{selectedCity ? selectedCity.name : 'none'}}&lt;/p&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On some other stackowerflo they advice to do this in css.</p>
  
  <pre><code>p-dropdown.ng-invalid:not(form) &gt; 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;
  }
  </code></pre>
  
  <p>How to do that please?</p>