HTML input button css-height not working on Safari and Chrome
62,246
Solution 1
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;
}
Solution 2
Just adding -webkit-appearance: none;
on my <input>
worked for me on safari browser on Macbook.
Solution 3
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
Author by
Madeline
Updated on January 19, 2020Comments
-
Madeline over 4 years
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?