如何编辑表单上的提交按钮的大小?

Jam*_*mes 50 html css forms

嗨我不想要我的提交按钮的图像所以我已经使用默认的提交按钮,但我想编辑它的宽度和高度.我怎么做?

<input type="submit" id="search" value="Search"  />
Run Code Online (Sandbox Code Playgroud)

谢谢!

詹姆士

Mah*_*mar 60

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

<input type="submit" id="search" value="Search"  style="height:50px; width:50px" />
Run Code Online (Sandbox Code Playgroud)


Pau*_*ime 53

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

#search {
    width: 20em;  height: 2em;
}
Run Code Online (Sandbox Code Playgroud)

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

input[type=submit] {
    width: 20em;  height: 2em;
}
Run Code Online (Sandbox Code Playgroud)

或者如果您希望某些类按钮成为特定样式,您可以使用CSS类:

<input type="submit" id="search" value="Search" class="search" />
Run Code Online (Sandbox Code Playgroud)

input.search {
    width: 20em;  height: 2em;
}
Run Code Online (Sandbox Code Playgroud)

我使用ems作为测量单位,因为它们往往更好地扩展.

  • 对于 Safari Mac,您还需要设置“border: none”才能看到这些更改。 (3认同)

小智 8

改变高度使用:

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


小智 7

<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">
Run Code Online (Sandbox Code Playgroud)

根据您的要求使用它.


spi*_*ike 6

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

#search {
     height: 100px;
     width: 400px;
}
Run Code Online (Sandbox Code Playgroud)

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

  • 您可能需要设置`{border:none;}` (7认同)

Joe*_*Joe 6

使用CSS.

在你的<head>标签内(#search意思是"ID为search" 的元素)

<style type="text/css">
    input#search
    {
        width: 20px;
        height: 20px;
    }
</style>
Run Code Online (Sandbox Code Playgroud)

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

<input type="submit" id="search" value="Search"  style="width: 20px; height: 20px;" />
Run Code Online (Sandbox Code Playgroud)

  • 嗨,谢谢我使用safari OSX并且每个答案都没有改变,也没有改变它.我能做什么? (2认同)