31

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

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

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

4

4 回答 4

59

将其更改<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;
}
于 2012-09-16T23:28:32.277 回答
11

只需在 Macbook 上的 safari 浏览器上添加-webkit-appearance: none;我为我工作的内容。<input>

于 2015-10-15T05:58:01.623 回答
5

这也应该有效。

  -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
于 2015-02-23T02:13:57.997 回答
0

添加到Şήøωў的（赞成）答案：

@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;
}
于 2018-01-19T00:26:54.793 回答