CODEWITHSUNDEEP
htmlcssforms
James
James

Reputation: 1925

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

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="search" value="Search"  />

Thanks!

James

Upvotes: 60

Views: 552735

Answers (11)

Paul Grime
Paul Grime

Reputation: 15104

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.

Upvotes: 63

Lakshya Gupta
Lakshya Gupta

Reputation: 1

You can change height and width using CSS:

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

Upvotes: 0

Saulo Santiago
Saulo Santiago

Reputation: 530

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
}

Upvotes: 11

Moh Drame
Moh Drame

Reputation: 9

enter image description here

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;
 }

Upvotes: 1

user972255
user972255

Reputation: 1828

Just add style="width:auto"

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

This worked for me in IE, Firefox and Chrome.

Upvotes: 0

Matt
Matt

Reputation: 85

Use the css height and width properties.

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

Upvotes: 3

1010
1010

Reputation: 221

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;
}

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

Upvotes: 1

Vikas
Vikas

Reputation: 277

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

Use this with your requirements.

Upvotes: 7

Mahesh Thumar
Mahesh Thumar

Reputation: 4395

just use style attribute with height and width option

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

Upvotes: 73

Joe
Joe

Reputation: 15802

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

Upvotes: 6

spike
spike

Reputation: 10004

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.

Upvotes: 6

Related Questions