Font size of HTML form submit button cannot be cha

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.

Answer 1

Add a class to the submit button HTML and in that class in css override the standard font-size.

You can also do something with CSS2/3 as:

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

I would also recommend using ems as a font size rather than px as pixels will appear differently on different devices and at different resolutions. For example with Retina.

NOTE:

em's are a relative scale based on the font-size set in the body, so if your body { font-size:16px; } then a later defined sub rule font-size of 1.5em in for example the input type will be 1.5 x 16px, etc.

Answer 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">

Answer 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

Answer 4

I did this and works for me:

<font size="5">
   <input type="submit" value="Submit">
</font>

Answer 5

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 {...}

Answer 6

This works for me:

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