如何将删除/清除字段图标添加到输入字段答案

【问题标题】：How to add a remove/clear field icon to an input field如何将删除/清除字段图标添加到输入字段
【发布时间】：2015-01-13 04:33:57
【问题描述】：

AngularJS 1.3 中带有type="date" 的标准输入字段提供了一个“清除字段”图标。 Here is 我的意思。

有没有办法将这种“清除字段”图标添加到带有type="text" 的输入字段？

【问题讨论】：

纯 JS、HTML、CSS 版本 ====> jsbin.com/bebug/5/edit?output

标签： javascript html angularjs angularjs-directive

【解决方案1】：

两种解决方案都能胜任。区别在于样式。

使用<input type="search">，输入字段默认为rounded corners（这使其具有搜索框的直观感觉：）和初始placeholder text。我相信我在某处读到不建议操作 shadow DOM，所以我认为最好不要摆弄它。如果我错了，请纠正我。 PS：很高兴了解标准输入type="search"。
plain JS, HTML, CSSsolution 在 cmets 中向我的问题 does exactly 提出了我正在寻找的问题。输入框我还是用type="text"，用class="clearable"。

其中class="clearable"如下：

.clearable{
 background: #fff
 url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
 border: 1px solid #999;
 padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
 border-radius: 3px;
 transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; }
.clearable.onX{ cursor: pointer; }

这取决于用例和个人喜好。两种解决方案都很棒。

@God 很好，您能否将您的评论重写为答案，s.t.我可以接受。

@Lloyd Banks，也非常感谢您提供的解决方案，这对于搜索类型的输入字段非常有用。

注意

如果使用除clearable 之外的其他类，请记住可能存在冲突。

【讨论】：

【解决方案2】：

这不是 Angular 的事情。这是一个 HTML 5 功能。您可以使用type='search' 模拟相同的清除 x 按钮。您的输入仍然看起来像文本输入。

<input type="search">

【讨论】：