Basic CSS button styling not working

Question

Here is the HTML:

<input type="submit" name="submit" value="SHOUT" />

Here is the CSS:

input[type="submit"] {
    height: 50px;
}

The problem is that it doesn't amend the size of the submit button. Could there be any reason for this?

Could you create a [JSFiddle](http://jsfiddle.net) demonstrating the issue? — Sumner Evans, Apr 21 '15 at 17:54
Here is a [JSFiddle to demonstrating that your code resizes the input](http://jsfiddle.net/e8se0zer/): . Is your posted code different in some way than the code you are testing? — George Cummins, Apr 21 '15 at 17:54
Check whether any other style properties are overriding using Developer tools(F 12) — malkam, Apr 21 '15 at 17:54
I can confirm that this code does not work in Chrome; it probably has to do with the type of display of input elements (inline / block /inline-block) — Ben Cole, Apr 21 '15 at 17:56
@jsve Interesting. It works for me in Firefox and Chrome (latest) on Ubuntu. Is Mac OS the common factor between you and bcole, I wonder? — George Cummins, Apr 21 '15 at 17:57
Possible duplicate: http://stackoverflow.com/questions/12450776/html-input-button-css-height-not-working-on-safari-and-chrome — Ben Cole, Apr 21 '15 at 17:57
@GeorgeCummins Doesn't work in Safari for Mac either. It does work in FF for Mac, Chrome for Windows, FF for Windows, and IE 11. — Sumner Evans, Apr 21 '15 at 17:59
@Pearson confirmed: that works on Chrome for Mac and Safari for Mac. — Sumner Evans, Apr 21 '15 at 18:01
@bcole while it may be a similar question to the one you link to, the solution presented on your linked question I really doubt would be applicable in this case (I may be wrong but....) — Martin, Apr 21 '15 at 18:06
what if use `button` element over `input` tag. For example how about using this way `` — Kheema Pandey, Apr 21 '15 at 18:11
Apologies as I have never used JSFiddle: http://jsfiddle.net/#&togetherjs=EBiRT4cIIL — jimbo123, Apr 21 '15 at 18:22
@jimbo123 try to put `-webkit-appearance: button;` in your CSS file. — Kheema Pandey, Apr 21 '15 at 18:26

score -2 · Answer 1 · answered Apr 21 '15 at 17:54

-2

The same code you provided seems to work fine. Did you add reference to css file properly?

input[type="submit"] {
    height: 150px;
}

<input type="submit" name="submit" value="SHOUT" />

answered Apr 21 '15 at 17:54

Vim

559
5
16

1

This was not mentioned in your question :) Please update your question. – Vim Apr 21 '15 at 17:55
ahh I didn't think that would be an issue let me double check – jimbo123 Apr 21 '15 at 17:56
@Vim use an "@" sign to notify of having commented. – Oct 14 '15 at 20:25

Martin · Answer 2 · 2015-04-21T18:05:21.453

-2

Some possible solutions:

set the value to important : height:50px !important;
check that nothing else overwrites the value in CSS. Typically use Firebug or similar to check this in your browser window (see here).
Set a min-height value and/or a max-height value to the same as the standard height.

I can't give you more specific advice without a link or a fiddle to play with.

edited Apr 21 '15 at 18:05

answered Apr 21 '15 at 17:56

Martin

22,212
11
70
132

Basic CSS button styling not working

2 Answers2