Chrome中checkbox的::after伪元素生效但text input不生效的原因及解决办法

首先直接给出结论：要让两种输入框都能显示左上角的红色三角，你需要把伪元素的绑定目标从输入框本身切换到它所在的<td>单元格。

可行的修改方案（兼容Chrome 75） #

由于你的Chrome版本不支持:has()选择器，我们可以用JavaScript配合CSS来实现：

1. 调整CSS #

td { 
  position: relative; 
  border: 1px solid black; 
}
td input { margin-left: 10px; }
/* 给带td-changed类的单元格添加伪元素 */
td.td-changed::after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  border-color: transparent; 
  border-style: solid; 
  border-width: 3px; 
  border-left-color: #c00000; 
  border-top-color: #c00000;
}

2. 添加JavaScript代码 #

这段代码会自动给包含.changed类输入框的单元格添加td-changed类，同时支持动态修改输入框类名的场景：

// 初始化处理已有的.changed输入框
document.querySelectorAll('input.changed').forEach(input => {
  input.parentElement.classList.add('td-changed');
});

// 监听输入框类名变化，同步更新单元格样式
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      const input = mutation.target;
      const td = input.parentElement;
      input.classList.contains('changed') 
        ? td.classList.add('td-changed') 
        : td.classList.remove('td-changed');
    }
  });
});

// 对所有输入框开启监听
document.querySelectorAll('input').forEach(input => {
  observer.observe(input, { attributes: true });
});

如果是使用Chrome 105及以上的现代浏览器，可以直接用:has()选择器省略JS代码：

td:has(.changed)::after { 
  /* 伪元素样式和上面一致 */
}

为什么会出现差异？ #

核心原因是不同类型的<input>属于替换元素（replaced elements），但浏览器对它们的伪元素支持策略完全不同：

• <input type="checkbox">：这类原生控件是由操作系统或浏览器内置样式完全控制的替换元素，浏览器会直接忽略针对它们的伪元素声明——你在DevTools里能看到伪元素节点，但实际渲染时它的尺寸是0x0，不会显示任何内容。你觉得“对checkbox生效”可能是视觉错觉或其他样式干扰导致的。
• <input type="text">：这类输入框虽然也是替换元素，但浏览器允许CSS对其进行更多定制，包括生成伪元素。不过伪元素是作为输入框的子元素存在的，可能会被输入框的边框覆盖，或者因为输入框的inline-block特性导致定位异常，所以你看不到预期效果。

隐式属性差异与覆盖可能性 #

两种输入框的隐式属性差异主要在于：

• Checkbox的内部渲染是封闭的，浏览器不允许任何外部CSS（包括伪元素）插入到控件内部，没有可覆盖的隐式属性能改变这一点。
• Text输入框的伪元素可以被渲染，但你需要确保它的层级高于输入框（比如设置z-index: 1），同时给输入框设置position: relative让伪元素相对于它定位，但这种方式依然无法解决checkbox的问题，所以还是推荐把伪元素绑定到td上。

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