Кнопка ввода HTML css-height не работает в Safari и Chrome

У меня есть очень простой вопрос. Я устанавливаю высоту 50 пикселей для моей кнопки отправки формы html. Он работает на Firefox, но не на Chrome и Safari. Код такой же простой, как и следующий:

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

Любая идея, как заставить его работать с Chrome и Safari?

Ответ 1

Измените его с <input> на <button> и добавьте -webkit-appearance: none; в начало вашего CSS, например:

.submitbtn {
    -webkit-appearance: none;
    height: 50px;
    background-color:#FFF;
    color:#666;
    font-weight:bold;
    border: solid #666 1px;
    font-size: 14px;
}

Ответ 2

Это также должно работать.

  -webkit-appearance:default-button;

Для этого свойства существует немало параметров, которые вы можете использовать и/или следить за ними. Кроме того, если вы просто хотите отключить внутренние тени полей ввода, вы можете просто использовать -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

Ответ 3

Просто добавив -webkit-appearance: none; в мой <input>, работал у меня в браузере Safari на Macbook.

Ответ 4

Добавление в Şήøωў ^(upvoted)answer:

@Safari 11.0.2 (13604.4.7.1.3) @macOS 10.13.2 (17C88)
например.

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

решил мою проблему (всего -size в основном [-webkit-] font- *, имеющей очень ограниченный эффект), переопределение "Таблицы пользовательских агентов":

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