如何为search类型输入框添加跟随文本浮动的清除按钮？

你完全可以通过使用type="search"类型的输入框来快速实现“带浮动清除按钮的文本输入框”需求——这是浏览器原生支持的功能，不需要额外编写JavaScript或者复杂的CSS布局。

核心原理 #

当你将input的type属性设置为search时，Chrome、Firefox、Safari、Edge等主流现代浏览器会自动为输入框添加以下行为：

• 输入框内有内容时，自动在文本后方显示一个清除按钮（小叉叉图标）
• 点击该按钮会一键清空输入框内的所有内容
• 按钮默认就是浮动在输入框内部的文本后方，完全符合你的布局需求

基础代码示例 #

你给出的基础代码已经可以实现核心功能，这里补充一个带占位符的版本，方便快速测试效果：

<input type="search" placeholder="请输入搜索内容...">

自定义样式（可选） #

如果原生清除按钮的样式不符合你的设计风格，也可以通过CSS针对不同浏览器内核进行自定义调整：

/* 针对WebKit内核浏览器（Chrome、Safari、Edge） */
input[type="search"]::-webkit-search-cancel-button {
  /* 调整按钮尺寸 */
  height: 18px;
  width: 18px;
  /* 替换为自定义图标 */
  background-image: url('你的自定义清除图标路径');
  background-size: contain;
  background-repeat: no-repeat;
  /* 移除默认边框 */
  border: none;
}

/* 针对Firefox浏览器 */
input[type="search"]::-moz-search-clear-button {
  /* 调整图标颜色 */
  fill: #888;
  /* 调整尺寸 */
  width: 16px;
  height: 16px;
}

兼容性说明 #

目前主流现代浏览器都完美支持这个原生特性，只有极少数非常老旧的浏览器（比如IE11及更早版本）可能没有默认提供这个按钮，但这类浏览器的市场占比已经极低，对大多数场景来说这个方案的兼容性完全足够。

内容的提问来源于stack exchange，提问作者Chris Hemmens