Ng Zorro与自定义搜索框冲突：如何恢复清除按钮功能？

以下是几种无需全局禁用Ng Zorro或替换组件的方案，可针对性解决问题：

方案1：CSS强制覆盖，恢复原生清除按钮 #

Ng Zorro通常会全局隐藏input[type="search"]的原生清除按钮，通过给你的特定输入框设置伪元素样式，强制覆盖Ng Zorro的规则：

/* 针对id为search-input的输入框，强制显示webkit内核浏览器的清除按钮 */
#search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  /* 自定义样式匹配你的设计 */
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #999;
  position: relative;
  cursor: pointer;
}

/* 给清除按钮添加X标识 */
#search-input::-webkit-search-cancel-button::after {
  content: 'X';
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 兼容Firefox浏览器 */
#search-input::-moz-search-cancel-button {
  display: block !important;
  /* 可自定义Firefox下的样式 */
}

方案2：自定义清除按钮，完全脱离原生依赖 #

自己实现一个清除按钮，通过输入框内容控制显示/隐藏，完全不受Ng Zorro影响：

修改后的HTML #

<div class="search-container">
  <input class="search-Input form-control custome-search-input dark-placeholder" 
         aria-labelledby="search-label" 
         id="search-input"  
         autofocus="true" 
         placeholder="Search" 
         type="search" 
         [(ngModel)]="searchText">
  <label class="search-icon search-icon-placeholder" for="search-input" id="search-label">
    <svg width="20" height="20" class="search-Search-Icon" viewBox="0 0 20 20">
      <path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </label>
  <!-- 自定义清除按钮 -->
  <button class="custom-clear-btn" 
          *ngIf="searchText.trim()" 
          (click)="clearSearchInput()">
    X
  </button>
</div>

配套CSS #

.custom-clear-btn {
  position: absolute;
  top: 50%;
  right: 30px; /* 避开右侧放大镜图标位置 */
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 16px;
}

组件TS逻辑 #

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

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  searchText: string = '';

  clearSearchInput() {
    this.searchText = '';
    // 清空后恢复输入框焦点
    setTimeout(() => {
      const input = document.getElementById('search-input');
      input?.focus();
    });
  }
}

方案3：使用样式穿透，选择性禁用Ng Zorro的影响 #

利用Angular的:host ::ng-deep穿透组件样式隔离，针对特定输入框重置Ng Zorro的样式规则：

:host ::ng-deep #search-input::-webkit-search-cancel-button {
  display: block !important;
  /* 可根据需要调整样式 */
}

:host ::ng-deep #search-input::-moz-search-cancel-button {
  display: block !important;
}

内容的提问来源于stack exchange，提问作者Anna Uspenskaya