html input border-width,html - Setting border-top-width: 0px; on Input changes whole border appearan...

I want to display two input fields under each other with no margin, no padding and no double border (so it pretty much looks like a regular table, with a single separation

line between each field).

Removing the margin was easy (margin-top: 0px; margin-bottom: 0px;), but when I tried to remove the top border with border-top-width: 0px;, the whole appearance of the input border changed to a lighter grey and the size looks larger too. This effect happens in all browsers.

Here is an example:

HTML

CSS:

input {

margin-top: 0px;

margin-bottom: 0px;

}

.test input {

border-top-width: 0px;

}

.test input:first-child {

border-top-width: 2px;

}

Image explaining what I want: