How to edit the size of the submit button on a form?
HtmlCssFormsHtml Problem Overview
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
Html Solutions
Solution 1 - Html
just use style attribute with height and width option
<input type="submit" id="search" value="Search" style="height:50px; width:50px" />
Solution 2 - Html
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.
Solution 3 - Html
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
}
Solution 4 - Html
<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">
Use this with your requirements.
Solution 5 - Html
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.
Solution 6 - Html
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;" />
Solution 7 - Html
Use the css height and width properties.
For this to work on Mac, you also need to set the button's border to none.
Solution 8 - Html
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 - https://jsfiddle.net/vodn97j5/">JSfiddle</a><br><br>
Solution 9 - Html
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;
}
Solution 10 - Html
Just add style="width:auto"
<input type="submit" id="search" value="Search" style="width:auto" />
This worked for me in IE, Firefox and Chrome.