应用于表格单元格中HTML输入元素的CSS背景属性

Question

JSFiddle

当您在表中的输入字段上悬停时，除了顶部的几个像素外，整个单元格都会变成灰色。为什么会这样呢？我试着把我能想到的一切(边距、填充、框影等)设置为0或none，但都没有效果。

Answer 1

您还没有在输入字段上定义高度，因此它比包含的td小

td input {
     height:20px;
}

http://jsfiddle.net/oe2ofup6/2/

Answer 2

考虑更改您的CSS以检查td:hover而不是input:hover。

而不是：

td input:hover {
    background-color: #8d8d8d;
}

td input {
    width: 100%;
    border: 0;
}

尝试：

td input {
    width: 100%;
    border: 0;
}

td:hover, td:hover input {
    background-color: #8d8d8d;
}

JSFiddle