How to edit the size of the submit button on a form?

2023-04-04 04:33 问答作者：

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="se开发者_JAVA百科arch" value="Search"  />

Thanks!

James

just use style attribute with height and width option

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

Using CSS you can set a style for that specific button using the id (#) selector:

#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:

<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.

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
}

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

Use this with your requirements.

You can change height and width with css:

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

It's worth pointing out that safari on OSX ignores most input button styles, however.

Using CSS.

Either inside your <head> tag (the #search means "the element with an ID of search")

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

Or inline, in your <input> tag

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

Use the css height and width properties.

For this to work on Mac, you also need to set the button's border to none.

That's easy! First, give your button an id such as <input type="button" value="I am a button!" id="myButton" /> Then, for height, and width, use CSS code:

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