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

Question

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    lt input type  submit  id  search  value  Search     gt    Thanks   James

User · Accepted Answer

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.

User · Answer

Just add style  width auto    lt input type  submit  id  search  value  Search  style  width auto    gt   This worked for me in IE  Firefox and Chrome

User · Answer

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

User · Answer

lt input type  button  value  submit  style  height  100px  width  100px  left  250  top  250   gt    Use this with your requirements

User · Answer

That s easy  First  give your button an id such as  lt input type  button  value  I am a button   id  myButton    gt  Then  for height  and width  use CSS code    myButton       width  100px      height  100px      You could also do this CSS   input type  button         width  100px      height  100px      But that would affect all the buttons on the Page   Working example - JSfiddle

User · Answer

Use the css height and width properties   For this to work on Mac  you also need to set the button s border to none

User · Answer

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

User · Answer

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

User · Answer

Using CSS   Either inside your  lt head gt  tag  the  search means  the element with an ID of search     lt style type  text css  gt      input search               width  20px          height  20px         lt  style gt    Or inline  in your  lt input gt  tag   lt input type  submit  id  search  value  Search   style  width  20px  height  20px     gt

User · Answer

just use style attribute with height and width option   lt input type  submit  id  search  value  Search   style  height 50px  width 50px    gt

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

Examples related to html

Examples related to css

Examples related to forms