HTML输入按钮css-height在Safari和Chrome上无效

Question

我有一个非常基本的问题.我为我的html表单提交按钮设置高度为50px.它适用于Firefox,但不适用于Chrome或Safari.代码简单如下:

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

知道如何让它在Chrome和Safari上运行吗？

Answer 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;
}

Answer 2

只需添加-webkit-appearance: none;我的<input>工作,我对Safari浏览器上的MacBook.

Answer 3

这应该也有效.

  -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