Prime NG - Auto Complete CSS style applying

Question

I would like to understand how to apply CSS for the existing PrimeNG autoComplete component.

The change I am looking for is, the input text color should be white.

HTML file (top-bar.component.html)

<p-autoComplete styleClass="myclass" [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="20" [minLength]="1"
      placeholder="Search" [dropdown]="true" (keyup.enter)="populateResults($event)">
    </p-autoComplete>

CSS class (top-bar.component.css)

.myclass .ui-autocomplete .ui-autocomplete-input {
  color: white;
}

Component class (top-bar.component.ts)

@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})

Can someone help me on this ?

Thanks

have a look at this [**answer**](https://stackoverflow.com/questions/40131174/what-is-best-way-to-override-the-style-of-primeng-components/43552505#43552505) — Aravind, Apr 12 '18 at 07:12
I think what you're looking for is `[inputStyle]="{'color': 'white'}"`. If multiple styles need to be applied, `inputStyleClass` is even more convenient way. Refer to this docs https://www.primefaces.org/primeng-6.1.6/#/autocomplete — Ani Naslyan, Jun 23 '20 at 08:10

Rama Krishna. G · Answer 1 · 2018-04-13T09:07:58.037

I could fix it from the @Aravind suggest link. Removed the styleClass from and modifed the css with :host >>>.

If the css file is of type scss then use ::ng-deep

HTML file (top-bar.component.html)

<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="20" [minLength]="1"
      placeholder="Search" [dropdown]="true" (keyup.enter)="populateResults($event)">
    </p-autoComplete>

CSS class (top-bar.component.css)

:host >>> .ui-autocomplete .ui-autocomplete-input {
  color: white;
}

IF SCSS class (top-bar.component.scss)

:host ::ng-deep .ui-autocomplete .ui-autocomplete-input {
  color: white;
}

Component class (top-bar.component.ts)

@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})

score 0 · Answer 2 · answered Apr 12 '18 at 08:48

0

Please try this CSS :

.ui-autocomplete>.ui-inputtext {
  color: white;
}

See Plunker

answered Apr 12 '18 at 08:48

Antikhippe

6,316
2
28
43

The changes are done in styles.css but I am looking to change in the component associated styling file (top-bar.component.css) – Rama Krishna. G Apr 12 '18 at 09:38
Placing this CSS in `top-bar.component.css` should work for you. If not, can you create a Plunker please ? – Antikhippe Apr 12 '18 at 09:40
I just posted my answer. – Rama Krishna. G Apr 12 '18 at 09:41

score 0 · Answer 3 · answered Jun 24 '21 at 04:35

Prime ng Autocomplete custom style

<p-autoComplete 
      [(ngModel)]="selectedMenu" 
      [suggestions]="filteredMenus" 
      (completeMethod)="filterMenu($event)"
      field="value_en" 
      [minLength]="3"
      (onSelect)="itemSelectEvent($event)"
      placeholder="Search Menu ..."
      size="50"
      [style]="{
        display: 'inline-flex',
        height: '34px'
      }"
      >
    </p-autoComplete>

size="50" indicates the input width size

Prime NG - Auto Complete CSS style applying

3 Answers3