Why does my CSS not change height of submit button?

Question

Why does my CSS not change the height of the submit button? The width changes but the height doesn't. I've also tried using padding but again it doesn't change.

Here is my code: -

.contact-form input[type="submit"] {
  width: 100%;
  height: 65px;
}

<form class="contact-form" action="">
  <input type="text" name="fullname" placeholder="full name">
  <input type="text" name="email" placeholder="email address">
  <input type="text" name="subject" placeholder="subject">
  <textarea name="message" placeholder="message"></textarea>
  <input type="submit" value="Submit">
</form>

https://i.stack.imgur.com/DpdQK.png

Thanks

your code doesn't show your issue, do you have any other style loaded ? bootsrap or another library ? — G-Cyrillus, May 18 '17 at 18:12
@GCyrillus I see it in chrome on a mac. the height is being ignored. — Michael Coker, May 18 '17 at 18:13
Try using firebug (F12) and see whats happening to it, if the height is even passed, and post some results — K. Tromp, May 18 '17 at 18:15
@MichaelCoker Mac ? again buggy about something so basic ? aren't input supposed to be inline-block elements, so sizeable ? --------------- snippet works fine for me here (FF, chrome, opera, IE11 and even that funny old safari for windows ) — G-Cyrillus, May 18 '17 at 18:16
@GCyrillus yeah the height isn't respected as inline-block (default) or if set to block explicitly. — Michael Coker, May 18 '17 at 18:19
I don't understand this, but after messing around with it, I set `background: red` on the button, and the height began to affect it without changing anything else — chazsolo, May 18 '17 at 18:19
@chazsolo do you mean in Mac chrome ? , else give a try to position:relative instead, sometimes it is enough to reflow the element ;) thanks for feed back on that funny bug :) — G-Cyrillus, May 18 '17 at 18:21
Yeah with a background set it seems to change, I thought this was very strange. — Ashley Dutton, May 18 '17 at 18:22
Apparently this is not a new issue (http://stackoverflow.com/questions/10976700/how-to-set-the-height-of-an-button-input-element-on-webkit-browsers) — chazsolo, May 18 '17 at 18:23
I think the real question is what to do with this question... — chazsolo, May 18 '17 at 18:32
would position or transform is doing any good instead resetting bg or border ? — G-Cyrillus, May 18 '17 at 18:43
Well if adding a background fixed the bug, then just add a background: none; or transparent or just the grey using a color picker tool — K. Tromp, May 18 '17 at 20:13

score 8 · Answer 1 · answered May 18 '17 at 19:27

You have to use padding in your submit button in order to size it. I put an example below.

input[type=submit] {
  width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 40px 20px;
    border: none;
}

<form class="contact-form" action="">
  <input type="text" name="fullname" placeholder="full name">
  <input type="text" name="email" placeholder="email address">
  <input type="text" name="subject" placeholder="subject">
  <textarea name="message" placeholder="message"></textarea>
  <input type="submit" value="Submit">
</form>

Why does my CSS not change height of submit button?

1 Answers1