html - 如何使用angular 5和bootstrap放置x按钮以清除输入字段中的内容

Question

我正在尝试使用 angular 5 和 bootstrap 在输入字段中放置一个“x”按钮，但没有成功。

通过单击“x”按钮，该输入字段中的内容应该被清除

我试过用

<input type="search" id = "search">

在 CSS 中:

 input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
input[type="search"]::-ms-clear {
  color: red;
}

但是，我对这个实现有一个问题，因为 webkit-apperance 与 IE11 存在兼容性问题(甚至 firefox 也不支持它)并且没有显示“x”。

任何人都可以帮助我找到 Angular 5/6/7 和 Bootstrap 4 是否有任何解决方案。

我有一个使用 Jquery 和 Javascript 的解决方案 https://codepen.io/frosdqy/pen/grbxGW

但正在寻找纯 typescript(Angular) 或 bootstrap 解决方案。

如果有人可以帮助 angular5，那将是一个很大的帮助!

Answer 1

一切都是幻觉。你创建一个分区。在那个 div 里面用 x 创建一个输入和按钮。设置输入背景透明和边框 0. 你会看到它。