Primeng: [MultiSelect] Apply .ui-placeholder CSS class to p-multiSelect's defaultLabel

[earshinov]

I'm submitting a ...

[x] feature request

What is the motivation / use case for changing the behavior?

For dropdowns, .ui-placeholder CSS class is applied when the configured placeholder is displayed. It makes possible to style placeholder text.

For multiselects, there is no CSS class which would allow to distinguish defaultLabel from labels displayed when one or more items are selected. Effectively defaultLabel acts as a placeholder, but it is impossible to style it as a placeholder, because there is no CSS to bind CSS rules to.

Demo

https://stackblitz.com/edit/primeng-multiselect-placeholder

Application CSS:

.ui-placeholder.ui-placeholder.ui-placeholder {
  color: #999999;
}

Screenshot:

Notes:

• Ignore missing icons -- it is a StackBlitz issue
• Only the dropdown placeholder is properly styled
• Input placeholder is not styled, but it is easy to accomplish with ::placeholder

Please tell us about your environment:

The demo uses PrimeNG 7.1.0, but the problem still exists in 8.x.

• Angular version: 7.2.8
• PrimeNG version: 7.1.0
• Browser: all
• Language: all

[mertsincan]

Please try;

//CSS
body .ui-multiselect.ui-default-label .ui-multiselect-label{
  color: #999999;
}

//TS
item: string;

//html
<p>MultiSelect: <p-multiSelect [options]="items" [(ngModel)]="item" [styleClass]="!(item && item.length) ? 'ui-default-label' : ''" defaultLabel="Select items" [showHeader]="false"></p-multiSelect></p>

[earshinov]

But wouldn't it be convenient and consistent with other controls to have such CSS class available out of the box?

[zalizko]

+1

[arajay]

classic response from PrimeNg: "uSe CsS dUmMy"