32

I have a very basic question. I am setting height to 50px for my html form submit button. It works on Firefox but not Chrome nor Safari. The code is as simple as following:

<input type="submit" value="Send" style="height:50px;" />

Any idea how to make it work on Chrome and Safari?

Madeline
  • 1,039
  • 2
  • 11
  • 19
  • 3
    I'm not sure why this doesn't work alone, but I know if you add a background color it will read your `height` attribute: `​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​` – tcd Sep 16 '12 at 22:35
  • It works in Safari 5 and Chrome 20 when no other CSS is involved. Please consider editing your question to include your CSS. – Jay Sep 16 '12 at 22:57
  • well it's working for me perhaps you have more css that you are not showing us? – Linas Sep 16 '12 at 23:25

4 Answers4

59

Change it from <input> to <button> and add -webkit-appearance: none; to the start of your CSS, eg:

.submitbtn {
    -webkit-appearance: none;
    height: 50px;
    background-color:#FFF;
    color:#666;
    font-weight:bold;
    border: solid #666 1px;
    font-size: 14px;
}
MeltingDog
  • 14,310
  • 43
  • 165
  • 295
  • Actually...I stand corrected. My problem was fixed by increasing the font size, changing it to a `button` did not solve it for me. Like the OP it worked fine in Firefox but didn't change in Safari, which was important for me as I wanted it to work on the iPhone. – Andrew Fox Dec 31 '12 at 07:25
  • 10
    Just adding -webkit-appearance: none; on my worked perfect for me. – Jonas Sandstedt Jun 19 '14 at 15:10
  • 1
    I came here while solving a problem that the button was rendering as text. Adding -webkit-appearance: none; solved my problem too. – cdm May 06 '15 at 12:55
15

Just adding -webkit-appearance: none; on my <input> worked for me on safari browser on Macbook.

IKavanagh
  • 6,089
  • 11
  • 42
  • 47
Sachin Rana
  • 151
  • 1
  • 3
6

This should be working also.

  -webkit-appearance:default-button;

There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.

button
button-bevel
caret
checkbox
default-button
listbox
listitem
media-fullscreen-button
media-mute-button
media-play-button
media-seek-back-button
media-seek-forward-button
media-slider
media-sliderthumb
menulist
menulist-button
menulist-text
menulist-textfield
none
push-button
radio
searchfield
searchfield-cancel-button
searchfield-decoration
searchfield-results-button
searchfield-results-decoration
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
square-button
textarea
textfield
Şήøωў
  • 71
  • 1
  • 1
0

Adding to Şήøωў's (upvoted)answer:

@ Safari 11.0.2 (13604.4.7.1.3) @ macOS 10.13.2 (17C88)
e.g.

input[type=button]{
  -webkit-appearance: button;
}

solved my issue (of only -size of mostly [-webkit-]font-* having very limited effect);
overriding "User Agent Stylesheet":

input:matches([type="button"], [type="submit"], [type="reset"]){
  -webkit-appearance: push-button;
}
vike
  • 339
  • 6
  • 10