Font size of HTML form submit button cannot be changed

问题

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.

回答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"

回答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">

回答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

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

回答5:

I did this and works for me:

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

回答6:

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.

回答7:

This works for me:

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

来源：https://stackoverflow.com/questions/28127184/font-size-of-html-form-submit-button-cannot-be-changed

标签

html

css

forms

google-chrome

font-size