Chrome中input type="search"清除按钮(X)不生效的解决办法咨询

嘿，这个问题我碰到过不少次——Angular Material的md-input-container经常会把Chrome默认给type="search"输入框的清除按钮给覆盖掉。给你几个实用的解决方案，按优先级试试：

方案1：恢复Chrome默认的清除按钮样式 #

Angular Material的默认CSS会把Chrome搜索框的清除按钮伪元素::-webkit-search-cancel-button设为隐藏，你可以加一段自定义样式强制恢复它：

md-input-container input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  display: block;
  /* 可选：调整样式适配Material设计 */
  height: 16px;
  width: 16px;
  margin-right: 8px;
}

记得把这段CSS放在Material样式之后加载，确保优先级足够覆盖默认样式。

方案2：排查禁用状态的影响 #

你的输入框绑定了ng-disabled="'@ViewBag.EditaConteudo'"，当输入框处于禁用状态时，Chrome是不会渲染清除按钮的。可以先临时注释掉ng-disabled属性测试一下，如果清除按钮出现了，那就是禁用状态导致的问题——你可能需要调整@ViewBag.EditaConteudo的逻辑，或者在启用状态下才显示清除按钮。

方案3：手动添加自定义清除按钮（最靠谱的可控方案） #

如果样式调整总是踩坑，不如自己实现一个Material风格的清除按钮，逻辑完全由你掌控：
修改你的HTML代码，在md-input-container里添加一个图标按钮：

<div layout="row text-left" style="float:left; width:100%;">
  <md-input-container flex-offset="15" flex="70">
    <label>Pesquisar...</label>
    <input type="search" ng-model="$ctrl.pesquisa" ng-disabled="@ViewBag.EditaConteudo">
    <!-- 自定义清除按钮 -->
    <md-button class="md-icon-button" 
               ng-click="$ctrl.pesquisa = ''" 
               ng-show="$ctrl.pesquisa && !@ViewBag.EditaConteudo">
      <md-icon>close</md-icon>
    </md-button>
  </md-input-container>
</div>

这个按钮只会在输入框有内容且未禁用时显示，点击就能清空$ctrl.pesquisa，风格和Angular Material完全统一，还不会受浏览器默认样式的限制。

内容的提问来源于stack exchange，提问作者Bruno Souza