Html 如何编辑表单上提交按钮的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7374001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to edit the size of the submit button on a form?
提问by James
Hi I don't want an image for my submit button so I have gone with the default submit button but I want to edit its width and height. How do I do that?
嗨，我不想要提交按钮的图像，所以我使用了默认的提交按钮，但我想编辑它的宽度和高度。我怎么做？
<input type="submit" id="search" value="Search" />
Thanks!
谢谢！
James
詹姆士
回答by Mahesh Thumar
just use style attribute with height and width option
只需使用带有高度和宽度选项的样式属性
<input type="submit" id="search" value="Search" style="height:50px; width:50px" />
回答by Paul Grime
Using CSS you can set a style for that specific button using the id (#) selector:
使用 CSS，您可以使用 id (#) 选择器为该特定按钮设置样式：
#search {
width: 20em; height: 2em;
}
or if you want all submit buttons to be a particular size:
或者如果您希望所有提交按钮都具有特定大小：
input[type=submit] {
width: 20em; height: 2em;
}
or if you want certain classes of button to be a particular style you can use CSS classes:
或者，如果您希望某些按钮类成为特定样式，您可以使用 CSS 类：
<input type="submit" id="search" value="Search" class="search" />
and
和
input.search {
width: 20em; height: 2em;
}
I use ems as the measurement unit because they tend to scale better.
我使用 em 作为度量单位，因为它们倾向于更好地缩放。
回答by Saulo Santiago
Change height using:
使用以下方法更改高度：
input[type=submit] {
border: none; /*rewriting standard style, it is necessary to be able to change the size*/
height: 100px;
width: 200px
}
回答by Vikas
<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">
Use this with your requirements.
根据您的要求使用它。
回答by spike
You can change height and width with css:
您可以使用 css 更改高度和宽度：
#search {
height: 100px;
width: 400px;
}
It's worth pointing out that safari on OSX ignores most input button styles, however.
值得指出的是，OSX 上的 safari 会忽略大多数输入按钮样式。
回答by Joe
Using CSS.
使用CSS。
Either inside your <head>tag (the #searchmeans "the element with an ID of search")
在您的<head>标签内（#search意思是“ID 为search”的元素）
<style type="text/css">
input#search
{
width: 20px;
height: 20px;
}
</style>
Or inline, in your <input>tag
或内联，在您的<input>标签中
<input type="submit" id="search" value="Search" style="width: 20px; height: 20px;" />
回答by Matt
Use the css heightand widthproperties.
使用 cssheight和width属性。
For this to work on Mac, you also need to set the button's borderto none.
要使其在 Mac 上运行，您还需要将button's设置border为none.
回答by 1010
That's easy!
First, give your button an idsuch as <input type="button" value="I am a button!" id="myButton" />Then, for height, and width, use CSS code:
这很容易！首先，给你的按钮一个id例如<input type="button" value="I am a button!" id="myButton" />然后，对于高度和宽度，使用 CSS 代码：
.myButton {
width: 100px;
height: 100px;
}
You could also do this CSS:
你也可以做这个 CSS：
input[type="button"] {
width: 100px;
height: 100px;
}
But that would affect all the buttons on the Page.
但这会影响页面上的所有按钮。
Working example - JSfiddle
工作示例 - JSfiddle
回答by bot
I tried all the above no good. So I just add a padding individually:
我尝试了以上所有方法都不行。所以我只是单独添加一个填充：
#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;
}
回答by user972255
Just add style="width:auto"
只需添加 style="width:auto"
<input type="submit" id="search" value="Search" style="width:auto" />
<input type="submit" id="search" value="Search" style="width:auto" />
This worked for me in IE, Firefox and Chrome.
这在 IE、Firefox 和 Chrome 中对我有用。
