如何编辑表单上提交按钮的大小？答案

【问题标题】：How to edit the size of the submit button on a form?如何编辑表单上提交按钮的大小？
【发布时间】：2011-11-14 11:56:53
【问题描述】：

您好，我不想要提交按钮的图像，所以我使用了默认提交按钮，但我想编辑它的宽度和高度。我该怎么做？

<input type="submit" id="search" value="Search"  />

谢谢！

詹姆斯

【问题讨论】：

标签： html css forms

【解决方案1】：

只需使用带有高度和宽度选项的样式属性

<input type="submit" id="search" value="Search"  style="height:50px; width:50px" />

【讨论】：

【解决方案2】：

使用 CSS，您可以使用 id (#) 选择器为特定按钮设置样式：

#search {
    width: 20em;  height: 2em;
}

或者如果您希望所有提交按钮都具有特定大小：

input[type=submit] {
    width: 20em;  height: 2em;
}

或者，如果您希望某些类别的按钮成为特定样式，您可以使用 CSS 类：

<input type="submit" id="search" value="Search" class="search" />

和

input.search {
    width: 20em;  height: 2em;
}

我使用 ems 作为度量单位，因为它们tend to scale better。

【讨论】：

对于 Safari Mac，您还需要设置 border: none 才能看到这些更改。
...您可以将其嵌入到 html 中，方法是用 <style media="screen" type="text/css">...embed here...</style> 括起来 - 哇！

【解决方案3】：

使用以下方法更改高度：

input[type=submit] {
  border: none; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 100px;
  width: 200px
}

【讨论】：

【解决方案4】：

<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">

根据您的要求使用它。

【讨论】：

【解决方案5】：

你可以用css改变高度和宽度：

#search {
     height: 100px;
     width: 400px;
}

值得指出的是，OSX 上的 safari 会忽略大多数输入按钮样式。

【讨论】：

您可能需要设置{border: none;}

【解决方案6】：

使用CSS。

在<head> 标记内（#search 表示“ID 为 search 的元素”）

<style type="text/css">
    input#search
    {
        width: 20px;
        height: 20px;
    }
</style>

或内联，在您的<input> 标记中

<input type="submit" id="search" value="Search"  style="width: 20px; height: 20px;" />

【讨论】：

嗨，谢谢，我正在使用 safari OSX 并且我已经尝试了每个答案，但没有任何改变。我能做什么？
你能贴出你试过的代码吗？这些都没有理由失败:)
我已经尝试了问题答案中发布的所有代码，是我的浏览器阻止它吗？
不应该，CSS 多年来一直是几乎所有浏览器的一部分。唯一可能的是您对代码的实现。在没有看到文件中可能影响它的其他代码的情况下，我们可以给你一百个可能的东西，但每一个都可能有 1% 的机会是正确的。
对于 Safari Mac，您还需要设置 border: none 才能看到这些更改。

【解决方案7】：

使用 css height 和 width 属性。

为了在 Mac 上工作，您还需要将 button 的 border 设置为 none。

【讨论】：

你知道mac为什么要设置border:none吗？

【解决方案8】：

这很简单！首先，给你的按钮一个id，比如<input type="button" value="I am a button!" id="myButton" /> 然后，对于高度和宽度，使用 CSS 代码：

.myButton {
    width: 100px;
    height: 100px;
}

你也可以这样做：

input[type="button"] {
    width: 100px;
    height: 100px;
}

但这会影响页面上的所有按钮。

工作示例 - JSfiddle

【讨论】：

【解决方案9】：

我尝试了以上所有方法都不好。所以我只是单独添加一个填充：

 #button {

    font-size: 20px;
    color: white;
    background: crimson;
    border: 2px solid rgb(37, 34, 34);
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
 }

【讨论】：

还有一个好处：通过增加字体大小，它会自动使按钮变大！ :)

【解决方案10】：

只需添加 style="width:auto"

<input type="submit" id="search" value="Search" style="width:auto" />

这在 IE、Firefox 和 Chrome 中对我有用。

【讨论】：