CODEWITHSUNDEEP
htmlcssformsinputsubmit
user3783430
user3783430

Reputation: 35

HTML submit button's size is smaller than 100%?

I have a little problem with a HTML form and its submit button:

<form action="login/login.php" method="post" style="margin-top: 10px;">
      <input id="login" name="username" type="text" placeholder="Nutzername" />
      <input id="login" type="password" name="passwort" placeholder="Passwort" />
      <input id="login" type="submit" value="Anmelden" />
</form>

CSS:

input[type=text]#login, input[type=password]#login {
border: 1px solid #ccc;
display: block;
height: 20px;
text-align: center;
width: 100%; }

input[type=submit]#login {
display: block;
height: 20px;
text-align: center;
width: 100%;

}

Result: http://jsfiddle.net/jMTT3/72/

As you can see, the button is slighty smaller than those text boxes.. What am I doing wrong?

Upvotes: 2

Views: 1728

Answers (1)

jcaron
jcaron

Reputation: 17710

The default setting is for width to apply to the content box (excluding padding and border). As the padding is different, the outer width is different.

You want to add:

-moz-box-sizing: border-box;
box-sizing: border-box;

to at least both of them.

Alternatively, you can set the same padding and border to achieve the same effect.

EDIT: Working Fiddle

Upvotes: 9

Related Questions