Reputation: 165

How to set the height of a button (input-element) on webkit browsers?

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?

Upvotes: 14

Answers (4)

Lukas Kalbertodt

Reputation: 88656

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

.my-button {
  box-sizing: content-box;
  height: 200px;
}

Upvotes: 1

Rusty

Reputation: 4473

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

Upvotes: 0

Paulo R.

Reputation: 15609

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/

Upvotes: 19

Madara's Ghost

Reputation: 174957

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

Upvotes: 2

How to set the height of a button (input-element) on webkit browsers?

Answers (4)

Related Questions