通过 CSS 的 caret-color: transparent 属性，可在保持文字可选（user-select: text）的前提下，完全隐藏点击后出现的闪烁文本光标，兼容现代主流浏览器。
通过 css 的 `caret-color: transparent` 属性，可在保持文字可选（`user-select: text`）的前提下，完全隐藏点击后出现的闪烁文本光标，兼容现代主流浏览器。
在网页开发中，常遇到这样一个需求：希望用户能正常选中文本（如复制、搜索），但又不希望点击后出现醒目的、持续闪烁的插入光标（caret）。传统做法是设置 user-select: none，但这会直接禁用所有文本选择行为，违背初衷。
幸运的是，CSS 提供了专门控制光标颜色的属性——caret-color。将其设为 transparent 即可让光标“视觉消失”，而文本的可选择性、焦点管理、键盘导航（如方向键移动光标）等交互能力全部保留：
/* 隐藏光标，但保留可选、可聚焦、可编辑（如适用）能力 */
.text-container {
caret-color: transparent;
user-select: text; /* 显式声明，确保可选（默认值通常已是 text） */
}
/* 若需在聚焦时也隐藏光标（例如 contenteditable 元素） */
.editable-field:focus {
caret-color: transparent;
}
✅ 优势说明：
- ✅ 不影响
window.getSelection()或document.execCommand()等选择相关 API； - ✅ 支持
、、contenteditable元素及普通文本容器； - ✅ 浏览器兼容性优秀：Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+ 均原生支持（caniuse 数据）；
- ✅ 语义清晰，比 hack 方式（如
outline: none+tabindex="-1"组合）更可靠、更可维护。
⚠️ 注意事项：
-
caret-color仅影响光标的颜色与可见性，不影响焦点状态。若需同时移除焦点轮廓（如蓝色外边框），请额外设置outline: none，但务必搭配:focus-visible或提供替代焦点样式，以保障可访问性； - 在部分旧版 Safari 或 WebView 中，
transparent可能渲染为浅灰而非完全透明，建议测试目标环境； - 若元素本身不可聚焦（如普通 ），需添加
tabindex="0"才能触发光标显示逻辑，此时caret-color才生效。总之，
caret-color: transparent是目前最标准、最轻量、最符合语义的解决方案——它精准解决“隐藏光标”这一单一诉求，不牺牲任何可用性或可访问性基础。
