如何阻止HTML5 search输入框失焦时隐藏清除按钮？

这个问题我之前也碰到过！本质是Chrome、Safari这类WebKit内核浏览器对<input type="search">的默认样式逻辑——默认会在输入框失焦时自动隐藏清除按钮。要实现「只要输入框有内容，不管是否聚焦都显示清除按钮」的需求，用纯CSS就能完美解决，具体方案如下：

1. 先重置默认搜索框样式（可选但推荐） #

浏览器自带的搜索输入框有很多默认样式，先重置掉能避免后续自定义样式冲突：

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  /* 这里可以自定义你的输入框样式，比如边框、圆角、内边距 */
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
}

2. 强制清除按钮始终显示（针对WebKit内核浏览器） #

WebKit内核用::-webkit-search-cancel-button伪元素控制清除按钮，我们可以强制它保持可见，同时保留「空输入框时隐藏」的合理逻辑：

/* 自定义清除按钮的样式并强制显示 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  /* 用内联SVG做清除图标，无需外部资源 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  /* 给按钮设置尺寸 */
  width: 16px;
  height: 16px;
  cursor: pointer;
  /* 关键：取消默认的失焦隐藏行为 */
  opacity: 1 !important;
}

/* 输入框为空时隐藏清除按钮（保持原有逻辑） */
input[type="search"]:placeholder-shown::-webkit-search-cancel-button {
  opacity: 0;
  pointer-events: none; /* 空状态下禁止点击 */
}

3. 兼容Firefox浏览器 #

Firefox用::-moz-search-cancel-button伪元素，同样可以设置：

input[type="search"]::-moz-search-cancel-button {
  opacity: 1 !important;
  cursor: pointer;
}

input[type="search"]:placeholder-shown::-moz-search-cancel-button {
  opacity: 0;
  pointer-events: none;
}

这样设置完成后，不管输入框是否处于聚焦状态，只要里面有内容，清除按钮就会一直显示，用户无需重新聚焦就能直接清除内容啦。

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