CODEWITHSUNDEEP
htmlcss
Stefan
Stefan

Reputation: 14863

Setting border-top-width: 0px; on Input changes whole border appearance

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:

enter image description here

Upvotes: 0

Views: 2816

Answers (5)

dykstrad
dykstrad

Reputation: 398

You should try using content editable divs. That way you can style the inputs however you want. I did the following in the your jsfiddle and it worked.

HTML:

<div class="test">
    <div class="input" contenteditable="true">Test</div>
    <div class="input" contenteditable="true">Test</div>
</div>

CSS:

.input {
    display: block;
    border: 1px solid #000;
    width: 100px;
    margin-bottom: -1px;
}

This gives the look that you wanted

Upvotes: 0

alexb
alexb

Reputation: 971

if you are ok with tables... 

<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    <tr>
        <td style="border:1px solid red;"><input type="text" value="" style="border: 0; width: 100%;" /><br /></td>
    </tr>
    <tr>
        <td style="border:1px solid red;"><input type="text" value="" style="border: 0; width: 100%;" /></td>
    </tr>
</table>

Here is the effect

foo

Upvotes: 0

Guffa
Guffa

Reputation: 700292

That's what happens when you start to style input elements.

Browsers generally have two defaults for inputs. One modern looking with thin borders (and sometimes glow effects) that is used if you don't style them at all, and one ancient looking with heavy inset borders that is used as default when you touch the style.

So, if you want to style the borders, you have to specify a complete style including style, width and color, to get the look that you want.

Something like:

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

Upvotes: 0

starowere
starowere

Reputation: 113

Redefine browser border style:

input {
    margin-top: 0px;
    margin-bottom: 0px;
    outline: 0;
    padding: 0;
    border: 1px solid #cccccc;
}

UPD: and remove 'px' for zero values.

Upvotes: 0

Retired_User
Retired_User

Reputation: 1595

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.

Upvotes: 1

Related Questions