如何为Angular 15中的datalist输入框及下拉建议框设置样式？

HTML5原生的<datalist>下拉建议框是浏览器原生控件，根本没法用CSS自定义样式——这是浏览器的设计限制，和Angular版本无关。你之前移除Chrome输入框默认箭头的SCSS代码是有效的，但下拉框本身不属于页面DOM树的一部分，CSS无法穿透修改它的样式。

下面提供两种可行的替代方案，完全支持自定义样式：

方案一：使用Angular Material的MatAutocomplete组件 #

Angular Material的自动完成组件是专门为这类场景设计的，完全可定制样式，且和Angular生态深度兼容。

1. 先安装Angular Material（如果未安装） #

ng add @angular/material

2. 组件代码示例 #

HTML模板：

<mat-form-field appearance="fill" class="imposto-search-field">
  <input type="text" 
         matInput 
         placeholder="Selecionar ou Digitar" 
         [(ngModel)]="impostoValue"
         [matAutocomplete]="auto"
         (input)="filterImpostoOptions($event)"
         (change)="seleImp($event)">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let i of filteredImposto" [value]="i.name">
      {{i.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

TypeScript逻辑：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-imposto-search',
  templateUrl: './imposto-search.component.html',
  styleUrls: ['./imposto-search.component.scss']
})
export class ImpostoSearchComponent implements OnInit {
  impostoValue: string = '';
  opImposto = [/* 你的选项数据，比如 { name: 'Imposto 1' } */];
  filteredImposto: typeof this.opImposto = [];

  ngOnInit(): void {
    this.filteredImposto = [...this.opImposto];
  }

  filterImpostoOptions(event: Event): void {
    const inputValue = (event.target as HTMLInputElement).value.toLowerCase();
    this.filteredImposto = this.opImposto.filter(item => 
      item.name.toLowerCase().includes(inputValue)
    );
  }

  seleImp(event: Event): void {
    // 保留你原来的seleImp逻辑
    console.log('Selecionado:', (event.target as HTMLInputElement).value);
  }
}

SCSS自定义样式：

.imposto-search-field {
  width: 100%;

  // 修改下拉面板样式
  .mat-autocomplete-panel {
    background-color: #f8f9fa;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    margin-top: 4px;
  }

  // 修改选项默认样式
  .mat-option {
    padding: 10px 16px;
    font-size: 14px;
    &:hover {
      background-color: #e9ecef;
    }
  }

  // 修改选中状态的选项样式
  .mat-option.mat-active {
    background-color: #0d6efd;
    color: white;
  }
}

方案二：自定义下拉组件（无第三方库） #

如果不想引入Angular Material，可以自己实现一个输入框+下拉列表的组合，完全掌控所有样式。

组件代码示例 #

HTML模板：

<div class="custom-imposto-select">
  <input type="text" 
         class="form-control" 
         [(ngModel)]="impostoValue"
         (input)="filterOptions()"
         (focus)="showDropdown = true"
         (blur)="delayHideDropdown()"
         placeholder="Selecionar ou Digitar">
  <span class="material-symbols-outlined iconSelect525" aria-hidden="true">expand_more</span>
  
  <!-- 自定义下拉列表 -->
  <ul class="custom-dropdown" *ngIf="showDropdown && filteredImposto.length > 0">
    <li *ngFor="let i of filteredImposto" 
        (click)="selectOption(i.name)">
      {{i.name}}
    </li>
  </ul>
</div>

TypeScript逻辑：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-imposto-select',
  templateUrl: './custom-imposto-select.component.html',
  styleUrls: ['./custom-imposto-select.component.scss']
})
export class CustomImpostoSelectComponent implements OnInit {
  impostoValue: string = '';
  opImposto = [/* 你的选项数据 */];
  filteredImposto: typeof this.opImposto = [];
  showDropdown = false;

  ngOnInit(): void {
    this.filteredImposto = [...this.opImposto];
  }

  filterOptions(): void {
    const value = this.impostoValue.toLowerCase();
    this.filteredImposto = this.opImposto.filter(item => 
      item.name.toLowerCase().includes(value)
    );
    this.showDropdown = true;
  }

  selectOption(name: string): void {
    this.impostoValue = name;
    this.showDropdown = false;
    this.seleImp({ target: { value: name } }); // 触发原来的seleImp方法
  }

  delayHideDropdown(): void {
    // 延迟隐藏，避免点击选项时下拉框提前关闭
    setTimeout(() => this.showDropdown = false, 150);
  }

  seleImp(event: { target: { value: string } }): void {
    // 保留你原来的业务逻辑
    console.log('Selecionado:', event.target.value);
  }
}

SCSS样式：

.custom-imposto-select {
  position: relative;
  width: 100%;

  .form-control {
    padding-right: 40px; // 给右侧图标留空间
    &::-webkit-calendar-picker-indicator {
      opacity: 0; // 保留你原来的箭头隐藏代码
    }
  }

  .iconSelect525 {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6c757d;
  }

  .custom-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;

    li {
      padding: 8px 12px;
      cursor: pointer;
      font-size: 14px;
      &:hover {
        background-color: #f8f9fa;
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Bruna Bergami