Question

我想了解如何为现有的PrimeNG autoComplete组件应用CSS。

我正在寻找的变化是，输入文字颜色应为白色。

HTML文件（ 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类（ top-bar.component.css ）

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

组件类（ top-bar.component.ts ）

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

有人可以帮我吗？

由于

Answer 1

我可以从@Aravind建议链接修复它。已删除styleClass并使用：host＆gt;＆gt;＆gt; 修改了css。

如果css文件的类型为scss，请使用 :: ng-deep

HTML文件（ 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类（ top-bar.component.css ）

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

IF SCSS课程（ top-bar.component.scss ）

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

组件类（ top-bar.component.ts ）

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

Answer 2

请试试这个CSS：

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

请参阅Plunker

Answer 3

Prime ng Autocomplete 自定义样式

<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" 表示输入宽度大小

Prime NG - 自动完成CSS样式应用

3 个答案: