How to set button height (input element) in web kit browsers?

Question

On my Mac with web browsers (Safari and Chrome, current version) I cannot set the height of the input element.

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

will not work.

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

http://jsfiddle.net/XmS6m/

Although setting the width is possible, either with an attribute style, or using jQuery.

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

Answer 1

Displaying the built-in block does nothing, since the inputs already have this screen installed by default. Add border:none . When you do this, it starts behaving the way you want it to. Here's the fiddle → http://jsfiddle.net/joplomacedo/XmS6m/1/

Answer 2

Button

is an element of the built-in level. You need to change this to block or inline-block :

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

Living example

Answer 3

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