caret-color 必须直接作用于可编辑元素（如 input、textarea、contenteditable 元素），而非 table 或 td；常见失效原因包括设在非编辑节点、只读/number 类型输入框限制、CSS 优先级覆盖或浏览器兼容性问题。
直接在表格内的 <input> 或 <textarea> 上用 caret-color 就行，但必须确保它处于可编辑状态、没被禁用、且样式真正作用到了目标元素上——表格容器本身不参与光标渲染，别往 <table> 或 <td> 上瞎设。
为什么表格里写了 caret-color 却没反应
常见原因不是语法错，而是样式没落到真实编辑节点：
- 你给
<td>或<tr>设了caret-color，但它不接受该属性——只有<input>、<textarea>、contenteditable="true"元素才响应 - 表格中用了
input[type="number"]或input[readonly]：前者在 WebKit/Chromium 中强制禁用caret-color，后者直接不可编辑，属性被忽略 - UI 框架（如 Element Plus、Ant Design）重置了表单控件的焦点样式，比如全局写了
input:focus { caret-color: auto !important; }，把你自己的规则覆盖了 - DevTools 里检查 computed styles，发现
caret-color的值是auto或initial，说明它被更高优先级规则覆盖或继承链中断
caret-color 在表格输入框中的正确写法
聚焦于具体可编辑元素，用足够明确的选择器避免被覆盖：
/* 推荐：直接作用于表格内所有文本类输入框 */
table input[type="text"],
table input[type="search"],
table input[type="tel"],
table textarea {
caret-color: #007bff;
-webkit-caret-color: #007bff; /* Safari ≤14.1 兼容 */
}
<p>/<em> 如果只针对某列，加 class 更稳妥 </em>/
.table-editable input,
.table-editable textarea {
caret-color: #ff6b6b;
}注意：caret-color 不继承，父元素设了也没用；也不支持 transparent 完全隐藏（部分浏览器会退为黑色）；深色背景配浅色光标时，务必同步检查 color 和 background-color 的对比度。
立即学习“前端免费学习笔记（深入）”；
表格中 contenteditable 单元格的光标颜色怎么设
如果不用原生表单控件，而是让 <td> 可编辑（contenteditable="true"），要格外小心：
-
caret-color在contenteditable上支持极差：Firefox 一直不支持，Safari 直到 15.4 才有限支持，Chrome 表现不稳定 - 必须显式写在
td[contenteditable="true"]上，不能靠父<table>继承 - 若需强兼容，建议放弃
caret-color，改用 JS 模拟伪光标（复杂且易出焦点同步问题），或直接换回<input>嵌套 - 富文本场景下，真实编辑区域常是内部
<div>或<span>，用 DevTools 点击光标确认焦点落在哪个节点，再对它设样式
真正容易被忽略的是：表格单元格常有 padding、border、font-size 缩放等盒模型干扰，光标位置看起来“偏移”，这不是 caret-color 的问题，而是整体布局需要微调。别一上来就怀疑属性失效，先用 DevTools 精确锁定焦点元素和最终生效样式。
