[SOLVED] how to check if p-dropdown prime ng has value selected in css

how to check if p-dropdown prime ng has value selected in css

for example p-inputtext got p-filled what do p-dropdown should have? both works with focus though

 .p-inputtext:enabled.p-filled {
    border: 1px solid $twenty;
}

::ng-deep .p-dropdown {
    background-color: initial;
    border: none;
    border-radius: 0%;
    border: solid 1px #ddd;
    min-width: 30rem;
    height: 5.5rem;
    width: 100%;
}

Solution

Your Updated CSS Combining these, your updated CSS might look like this:

::ng-deep .p-dropdown {
    background-color: initial;
    border: none;
    border-radius: 0%;
    border: solid 1px #ddd;
    min-width: 30rem;
    height: 5.5rem;
    width: 100%;
}

::ng-deep .p-dropdown:not(.p-dropdown-label-empty) .p-dropdown-label {
    border: 1px solid $twenty;
    background-color: #f0f8ff;
}

::ng-deep .p-dropdown .p-dropdown-label.p-dropdown-label-empty {
    color: gray;
    font-style: italic;
}

::ng-deep .p-dropdown:focus {
    outline: none;
    border: 1px solid blue;
}