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