logo标签列表

如何编辑表单中提交按钮的大小？

htmlcssforms
58

嗨，我不想使用图像作为提交按钮，所以我选择了默认的提交按钮，但是我想编辑它的宽度和高度。我该怎么做？

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

感谢！

James

11个回答
71

只需使用 height 和 width 选项的 style 属性即可

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

使用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作为度量单位，因为它们更容易进行比例缩放。

3
对于 Safari Mac，您还需要设置 border: none 以查看这些更改。 - Sparky
你可以将它嵌入到HTML中，方法是将其放在<style media="screen" type="text/css">...embed here...</style>标签中 - 哇！ - sage
11

使用以下方法更改高度：

input[type=submit] {
  border: none; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 100px;
  width: 200px
}
7
<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">

根据您的需求使用此功能。

6

你可以使用CSS来改变高度和宽度:

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

值得指出的是，在OSX上使用Safari时，大多数输入按钮样式都会被忽略。
7
你可能需要设置{border: none;}。 - AJP
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;" />
2
嗨，谢谢。我正在使用Safari OSX，尝试了所有的解决方案，但没有改变它。我该怎么办？ - James
你能发一下你尝试过的代码吗？这些代码没有任何失败的理由 :) - Joe
1
我已经尝试了问题答案中发布的所有代码，是我的浏览器阻止了它吗？ - James
不应该出现这种情况，因为CSS已经成为几乎所有浏览器多年来的一部分。唯一可能的是您对代码的实现。如果没有看到文件中可能影响它的其他代码，我们可以给您提供一百种可能性，但每种可能性只有1%的正确率。 - Joe
1
对于Safari Mac，您还需要设置border：none才能看到这些更改。 - Sparky
3
使用css中的height和width属性。
为了在Mac上正常工作，您还需要将button的border设置为none。
你知道为什么在Mac中需要设置border:none吗？ - Douglas Lise
1

enter image description here

我尝试了上述所有方法都不行。所以我只是单独添加了一个padding：

 #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;
 }
另外一个好的点：通过增加字体大小，它自动使按钮变大！ :) - rogerdpack
1

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

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

您可以使用以下CSS实现这个效果：

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

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

工作示例 - JSfiddle

0

您可以使用CSS更改高度和宽度：

#search{
     height:30px;
     width:100px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接