Hi all, I would like to ask you for help regarding p-dropdown from primeng. Here is what I am worring about.
What I need to do is to see p-dropdown border in red colour signaling that no any required value has been chosen. When I click on the dropdown I want shadow around all border to highlight also in red colour and when I choose value, no any style been applied just default border.
All code has been copied from original primeng page for simple dropdown menu test.
<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="true"**></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
</div>
</div>
</div>
On some other stackowerflow I have found some advice to do some changes in css cause this is not regarding p-dropdown directly but the first div. So I have added below.
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;
}
This works only when I select item and then remove so only then the border is red. But no any shadow has been applied like focus option. What I need when someone open page with this dropdown menu to see this border in red from the start without any action, when he clicks on dropdown menu to add shadow around whole border up,down,left,right and when value is chosen then defalut border option is applid and nothing is red.
How to do that please?