如何调整 HTML 表单提交按钮的大小？答案

【问题标题】：How to resize HTML form submit button?如何调整 HTML 表单提交按钮的大小？
【发布时间】：2016-01-13 23:41:44
【问题描述】：

我有一个用 CSS 设置样式的简单 HTML 表单。我尝试使用height 属性调整提交按钮的大小，但由于某些原因它不起作用。我尝试了width 属性并且它有效。 font-size 属性在一定程度上增加了按钮的高度，但是当font-size 增加20px 时，它也不起作用。

我正在使用 Safari 浏览器。

div {
  background-color:cadetblue;
  padding: 10px;
  border: 1px black solid;
}
form {
  margin-left: -15px;
}
label {
  display:block;
}
fieldset {
  border: none;
  display: inline;
}
input[type="submit"] {
  padding: 0px;
  height: 5em;
}
input[type="text"] {
  margin-left: 0px;
  width: 200px;
  height: 20px;
}

<div>
  <p>HTML FORM: nameform.htm - programmed by {Maihan Nijat!}</p>   
  <form method="post" action="greeting.php"> 
    <fieldset> 
      <label for="firstname" >Please enter your first name:</label> 
      <input name="firstname" type="text" />
    </fieldset>
    <input type="submit" value="Submit!" />
  </form>
  <hr> 
  <p>Copyright © 2014 <a href="http://www.php.net">The PHP Web Site</a>
  </p>
</div>

【问题讨论】：

input[type='submit'] 改变高度，你有 5em 把它改成 3em 或者使用 px。
您是否尝试在 CSS 之外的其他地方更改它？因为您拥有的 CSS 确实会改变高度。
它可以在 Firefox 中运行，您正在使用/测试哪个浏览器？
@GCyrillus 我正在使用 Safari。提供了答案。谢谢
@BSMP 我正在使用 Safari。提供了答案。谢谢

标签： html css forms

【解决方案1】：

尝试将-webkit-appearance: none; 添加到提交按钮的样式中。这可以防止 webkit 与您的风格发生冲突。

https://css-tricks.com/almanac/properties/a/appearance/

div {
  background-color:cadetblue;
  padding: 10px;
  border: 1px black solid;
}
form {
  margin-left: -15px;
}
label {
  display:block;
}
fieldset {
  border: none;
  display: inline;
}
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  padding: 0px;
  height: 5em;
}
input[type="text"] {
  margin-left: 0px;
  width: 200px;
  height: 20px;
}

<div>
  <p>HTML FORM: nameform.htm - programmed by {Maihan Nijat!}</p>   
  <form method="post" action="greeting.php"> 
    <fieldset> 
      <label for="firstname" >Please enter your first name:</label> 
      <input name="firstname" type="text" />
    </fieldset>
    <input type="submit" value="Submit!" />
  </form>
  <hr> 
  <p>Copyright © 2014 <a href="http://www.php.net">The PHP Web Site</a>
  </p>
</div>

【讨论】：

【解决方案2】：

您可以尝试将其更改为 button 元素，如下所示：https://jsfiddle.net/f3nuthn7/

然后您可以使用以下内容对其进行自定义：

button {/* Customize the button here*/
  font-size:20px;
  width:200px;
  height:150px;
  background:lightblue;
}

【讨论】：

【解决方案3】：

在您的 CSS 中更改此属性。

input[type="submit"] {
     height: 5em;
}

【讨论】：

从 CSS 中移除 height 属性将如何导致应用指定的高度？