Font size of HTML form submit button cannot be changed

Question

How can I increase the submit button font size? In chrome in particular, it's too small and the text looks squished. Working fiddle

body, input {
    font-size: 30px; 
}

I know there is

-webkit-appearance: none;

but that resets a lot of other styling. I'd like to keep the default styling, just with a different font size.

Solution 1

Webkit will respect your custom form element styles if you set a border or box-shadow property (yes, weird). As others have said, start with at least -webkit-appearance: none; (I'd add -moz-appearance: none; appearance: none;) and then refer to to this answer to "HTML select font-size"

Solution 2

I faced the similar problem, but when i put the style inline in input element, it was working. So some other styling could be causing the the problem.

 <input type="submit" value="Register" style = "font-size:20px">

Solution 3

To change the font size of a submit button, simply use this css code:

input[type=submit] {
    font-size: 0.5em;
}

Example: http://jsfiddle.net/xhf4bLnd/4/

EDIT: changed px to em

Solution 4

Using CSS, I found that using a more specific selector solved the problem. Instead of using a class or type selector:

button {font-size: 1.5em;}

I used an ID selector:

\#submit {...}

View more solutions