13

On my Mac with webkit-browsers (Safari and Chrome, current version) I can't set the height of an input-element.

<input type="button" style="height:200px;" value="Hello World!">​

won't work.

jQuerys $('input').css('height','200px');​ won't work either.

http://jsfiddle.net/XmS6m/

Though setting the width is possible, either with style-attribute or with jQuery.

What is the reason for this inconsistency? And what is a possible solution?

vvvvv
  • 25,404
  • 19
  • 49
  • 81
MI5
  • 155
  • 1
  • 1
  • 6
  • On Win 7 versions of Safari and Chrome, the height takes effect when set in CSS (using the jsfiddle; pure CSS is enough, and so if the jQuery code alone). So this might be a Mac specialty (perhaps it has a special default value for `-webkit-appearance` for the button?), or maybe even an installation-specific issue. – Jukka K. Korpela Jun 11 '12 at 13:46

4 Answers4

19

Display inline-block does nothing, as inputs already have that display set by default. Add border:none. When you do so, it starts behaving like you want it to. Here's the fiddle -> http://jsfiddle.net/joplomacedo/XmS6m/1/

João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • 3
    or add whichever border you want. – João Paulo Macedo Jun 11 '12 at 12:57
  • This is a great tip, thanks! I'm new to CSS and have been searching for a solution to this for a while. What does border:none accomplish? – HelloWorld Dec 08 '15 at 13:14
  • 1
    argh! with border:none it doesn't actually look like a button! @JOPLOmacedo How do I add a border which looks like the default button appearance? – Michael Jan 25 '16 at 18:48
  • 1
    Instead of an , you could use a button element , which lets you change it's height, without requiring changes to the border property. If you're interested in the difference between the two elements (not much), here's a link: http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use – João Paulo Macedo Jan 26 '16 at 01:42
2

Button is an inline-level element. You need to change that to block or inline-block:

#my_button { display: inline-block; height: 200px; }

Live Example

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • 1
    This doesn't fix the problem for me. Anyway thanks for your effort. – MI5 Jun 11 '12 at 10:36
  • 1
    How does it not fix your problem? What do you have? Does my example work for you? Please don't just leave comments such as "it doesn't work" without explaining! – Madara's Ghost Jun 11 '12 at 15:34
  • 2
    On my Mac your "Live example" won't adjust the height of the . Only the one of the – MI5 Jun 11 '12 at 20:50
  • 1
    On my Mac, the left-hand button is tall. The right hand button shows no change in height. – gregturn Feb 28 '17 at 15:43
1

Try setting the box-sizing property to content-box:

.my-button {
  box-sizing: content-box;
  height: 200px;
}
Lukas Kalbertodt
  • 79,749
  • 26
  • 255
  • 305
0

You can also increase the font-size of the button to enlarge it.

Rusty
  • 4,138
  • 3
  • 37
  • 45