html - 为什么 ::after 伪元素出现在复选框输入而不是 Chrome 中的文本输入？

Question

我有以下片段。如果输入的 CSS 类“已更改”，我想在单元格的左上角渲染一个小红色三角形。

它适用于复选框，但不适用于文本输入。当我在 Chrome 中检查元素时，复选框的伪元素的尺寸是0 x 0，对于文本输入，它的尺寸auto x auto显然是浏览器处理这些的方式存在一些差异，但我无法弄清楚。

我该如何更改它以使其对两者都有效？造成这种差异的机制是什么？一个或另一个是否有一些我可以覆盖的隐含属性？我对是否应该使用它不感兴趣（我已经阅读了这个答案）。

我正在使用 Chrome v75.0.3770.100。

td {
  position: relative;
  border: 1px solid black;
}
td input {
  margin-left: 10px;
}
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;
}

<table>
  <tr>
    <td><input type="checkbox" class="changed"/></td>
    <td><input type="text" class="changed"/></td>
  </tr>
</table>

标签： htmlcss