How to resize HTML form submit button?

Question

I have simple HTML form styled with CSS. I tried to resize the size of submit button with height attribute but It is not working for some reasons. I tried the width attribute and it works. The font-size attribute increase the height of the button to some extent but when the font-size increases 20px , then it also does not work.

I am using Safari browser.

 div { background-color:cadetblue; padding: 10px; border: 1px black solid; } form { margin-left: -15px; } label { display:block; } fieldset { border: none; display: inline; } input[type="submit"] { padding: 0px; height: 5em; } input[type="text"] { margin-left: 0px; width: 200px; height: 20px; } 

 <div> <p>HTML FORM: nameform.htm - programmed by {Maihan Nijat!}</p> <form method="post" action="greeting.php"> <fieldset> <label for="firstname" >Please enter your first name:</label> <input name="firstname" type="text" /> </fieldset> <input type="submit" value="Submit!" /> </form> <hr> <p>Copyright © 2014 <a href="http://www.php.net">The PHP Web Site</a> </p> </div> 

Answer 1

Try adding -webkit-appearance: none; to your styles for the submit button. This keeps webkit from fighting your styles.

https://css-tricks.com/almanac/properties/a/appearance/

 div { background-color:cadetblue; padding: 10px; border: 1px black solid; } form { margin-left: -15px; } label { display:block; } fieldset { border: none; display: inline; } input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0px; height: 5em; } input[type="text"] { margin-left: 0px; width: 200px; height: 20px; } 

 <div> <p>HTML FORM: nameform.htm - programmed by {Maihan Nijat!}</p> <form method="post" action="greeting.php"> <fieldset> <label for="firstname" >Please enter your first name:</label> <input name="firstname" type="text" /> </fieldset> <input type="submit" value="Submit!" /> </form> <hr> <p>Copyright © 2014 <a href="http://www.php.net">The PHP Web Site</a> </p> </div> 

Answer 2

You can try changing it to a button element like so: https://jsfiddle.net/f3nuthn7/

Then you can customize it with stuff like this:

button {/* Customize the button here*/
  font-size:20px;
  width:200px;
  height:150px;
  background:lightblue;
}

Answer 3

Change this property in your css.

input[type="submit"] {
     height: 5em;
}