HTML 输入按钮 css-height 在 Safari 和 Chrome 上不起作用答案

【问题标题】：HTML input button css-height not working on Safari and ChromeHTML 输入按钮 css-height 在 Safari 和 Chrome 上不起作用
【发布时间】：2012-09-09 04:02:45
【问题描述】：

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

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

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

【问题讨论】：

我不知道为什么这不能单独工作，但我知道如果您添加背景颜色，它将读取您的 height 属性：<input type="submit" value="Send" style="background: #eee; height: 50px;"/>
在不涉及其他 CSS 的情况下，它适用于 Safari 5 和 Chrome 20。请考虑编辑您的问题以包含您的 CSS。
嗯，它对我有用，也许你有更多的 CSS 没有向我们展示？

标签： html button input height submit

【解决方案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;
}

【讨论】：

其实...我的立场是正确的。我的问题是通过增加字体大小来解决的，将其更改为 button 并没有为我解决。与 OP 一样，它在 Firefox 中运行良好，但在 Safari 中没有改变，这对我来说很重要，因为我希望它可以在 iPhone 上运行。
只需添加 -webkit-appearance: none;在我的上非常适合我。
我在解决按钮呈现为文本的问题时来到这里。添加 -webkit-appearance: none;也解决了我的问题。

【解决方案2】：

只需在我的<input> 上添加-webkit-appearance: none; 就可以在 Macbook 上的 safari 浏览器上使用。

【讨论】：

【解决方案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

【讨论】：

所有这些值都与这个特定问题相关吗？您能否将范围缩小到几个最相关的？
这是我所说的可能的变量 -webkit-appearance:button;例如。

【解决方案4】：

添加到Şήøωў的^{（已投票）}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;
}

【讨论】：