input[type="search"] 的 × 按钮为什么改不了颜色
因为清除按钮是 WebKit 内置的伪元素，不是普通 DOM 节点，直接写 color 或 background 对它完全无效。必须用 ::-webkit-search-cancel-button 显式选中才能控制。
这个伪元素只在 Chrome、Safari、Edge（Chromium 内核）里存在，Firefox 和旧版 IE 完全不支持 —— 所以别指望一套 CSS 全平台生效。
- 它默认是灰色小叉，且带固定尺寸和内边距，不能靠
font-size缩放 - 修改前必须先用
appearance: none重置系统样式，否则其他样式可能被忽略 - 不能用
display: none彻底隐藏（会连功能一起干掉），要用opacity: 0或透明背景替代
::-webkit-search-cancel-button 的常用样式组合
单独设置 background-color 不起作用，得配合 background-image 或 mask 才能真正换色。最稳妥的方式是用 SVG 内联作为背景图，再用 background-size 控制缩放。
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 16px;
width: 16px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23ff6b6b' d='M4 4l12 12M4 16l12-12'/></svg>");
background-size: contain;
background-repeat: no-repeat;
}
- SVG 中的
%23ff6b6b是 URL 编码后的红色，可替换成任意十六进制色值 -
height/width必须显式设，不然在某些 Android WebView 里会塌缩成不可见 - 别用
filter: hue-rotate()，iOS Safari 15.4+ 有渲染 bug，会导致按钮闪烁或消失
移动端适配时容易漏掉的兼容细节
在 iPhone 上，input[type="search"] 默认会触发 Safari 的“搜索建议栏”，这个栏里的 × 按钮不受你的 CSS 控制 —— 那是系统级 UI，你改不了。你只能控制输入框本身的清除按钮。
立即学习“前端免费学习笔记（深入）”；
- iOS 16+ 开始，如果页面启用了
viewport的width=device-width, initial-scale=1，但没加user-scalable=no，双指缩放可能让清除按钮错位 - 部分安卓厂商浏览器（如华为 EMUI 浏览器）会忽略
::-webkit-search-cancel-button，需 fallback 到 JS 插入自定义清除按钮 - 用
rem或em设置height/width在某些低端 Android 机型上会失准，坚持用px
要不要用 JS 自己画一个清除按钮
当设计要求严格统一（比如要圆角、动效、或和输入框右侧图标对齐），纯 CSS 方案就力不从心了。这时候手动加一个 <button type="button" class="search-clear"></button> 更可控。
- 监听
input事件判断是否为空，动态toggleAttribute('disabled') - 点击时调用
inputEl.value = ''+inputEl.focus()，别忘了派发input事件 - 用
position: absolute右对齐时，记得给父容器设position: relative，且留够右内边距避免文字遮挡
复杂点在于：你要自己处理焦点管理、屏幕阅读器支持（aria-label="清除搜索词"）、以及 Safari 移动端键盘收起后按钮状态残留的问题 —— 这些都是纯 CSS 方案自动搞定的。
