Question

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

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

谢谢！

詹姆斯

Answer 1

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

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

Answer 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。

Answer 3

使用以下方式更改高度：

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

Answer 4

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

根据您的要求使用它。

Answer 5

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

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

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

Answer 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;" />

Answer 7

使用css height和width属性。

要在Mac上运行此功能，您还需要将button＆＃39; border设置为none。

Answer 8

这很简单！首先，为您的按钮添加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

Answer 9

只需添加style =“width：auto”

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

这适用于IE，Firefox和Chrome。

Answer 10

enter image description here我尝试以上所有方法均无济于事。所以我只是单独添加一个填充：

 #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 个答案: