Question

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

<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/

Image explaining what I want:

Answer 1

try this:

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

also, on your code, you can replace “0px” by “0”, for optimization.