html - 设置边框顶部宽度 : 0px; on Input changes whole border appearance

Question

我想在彼此下面显示两个输入字段，没有边距，没有填充，也没有双边框(所以它看起来很像一个普通表格，只有一个分隔符 每个字段之间的线)。

去除边距很容易(margin-top: 0px; margin-bottom: 0px;)，但是当我尝试使用 border-top-width: 0px 去除顶部边框时;，整个输入框的外观变成了浅灰色，尺寸也变大了。这种效果发生在所有浏览器中。

举个例子: HTML

<div class="test">
    <input type="text" value="Test" />
    <br />
    <input type="text" value="Test" />
</div>

CSS:

input {
    margin-top: 0px;
    margin-bottom: 0px;
}
.test input {
    border-top-width: 0px;
}
.test input:first-child {
    border-top-width: 2px;
}

fiddler :http://fiddle.jshell.net/32een/1/

解释我想要什么的图像:

Answer 1

试试这个:

.test input {
    border-top: 0;
}
.test input:first-child {
    border-top: 2px solid #ccc;
}

此外，在您的代码中，您可以将“0px”替换为“0”以进行优化。