html - ボーダートップ幅の設定: 0px; 入力時に境界線全体の外観が変更されます

Question

2 つの入力フィールドを、マージン、パディング、および二重境界線なしで互いの下に表示したい (そのため、各フィールド間に単一の区切り線がある通常のテーブルのように見えます)。

余白の削除は簡単でしたが ( 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;
}

フィドラー: http://fiddle.jshell.net/32een/1/

私が欲しいものを説明する画像：