9

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.

Ravi Ubana
  • 397
  • 5
  • 26
  • 1
    The code posted makes the font size 30px. This is absurd, but it works as defined. You need to specify what is the problem, how you tried to address it, and how your approach fails. – Jukka K. Korpela Jan 24 '15 at 20:24

7 Answers7

6

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">
Prajeet Shrestha
  • 7,978
  • 3
  • 34
  • 63
5

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"

Community
  • 1
  • 1
henry
  • 4,244
  • 2
  • 26
  • 37
  • On chrome putting font-size inline or in link css did nothing. Added webkit-appearance and, bingo, submit button changed size. – Ian Ellis Nov 23 '15 at 23:13
1

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

Fabian Wennink
  • 137
  • 3
  • 13
1

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 {...}
Io-oI
  • 2,514
  • 3
  • 22
  • 29
CalebZD
  • 11
  • 2
0

I did this and works for me:

<font size="5">
   <input type="submit" value="Submit">
</font>
Gabriel Santiago
  • 33
  • 5
-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.

Martin
  • 22,212
  • 11
  • 70
  • 132
  • And you force refreshed the page with shift-F5? Alternatively, add a class to the submit button, as suggested, and use that class as a handle. – Martin Jan 24 '15 at 17:04
  • you have not copied the code in my answer, read what you've written and compare it with what I have written in my answer. – Martin Jan 24 '15 at 17:13
  • well you said to tried adding a class, which is what i did -- when i click your jsfiddle it's the same as mine btw, normal default size.. in chrome and safari . not sure which browser you are checking on? –  Jan 24 '15 at 17:20
  • your implementation of the class was wrong. read up on how to set up and use classes in Css but you have a class `.submit{ font-size:0.5em; }` and call that class with `` . Although my version of your fiddle worked for me, try this new fiddle: http://jsfiddle.net/zxskp5nz/1/ – Martin Jan 24 '15 at 17:24
  • my implementation of classes is correct (you can test this by adding the rule color:red), anyway your new one isn't working either. seems this is _not_ possible. thanks. –  Jan 24 '15 at 17:32
  • sorry, but the fiddles work as intended on my Google Chrome, Firefox, Opera and Safari. You need to make changes: you need to set the 20em to another value, say 0.5em, and that will show the size difference, you also need to be aware that em's are relative to the body font size, as your font size in your body is set to 30px, a 20em font is 20x30! adjust your body font px size and input ems accordingly. – Martin Jan 24 '15 at 17:37
  • I tried your example - your last one in the comments, it does not work in safari or chrome on the mac. It does work in firefox.. –  Jan 24 '15 at 17:50
  • I'm sorry the fiddles do not work for you. They appear fine to me across all browsers. I think perhaps there's something specific to your setup that's preventing or interfering with the page code? I can't really suggest much more, but three separate answers here state the method to use, so if it doesn't work then the problem is probably more specific to your setup. :-/ – Martin Jan 24 '15 at 17:54
  • No Martin, the fiddles definitely do NOT work on Chrome on OSX. Are you using Windows? – CpnCrunch Oct 09 '15 at 21:37
  • Hi @CpnCrunch , well, the fiddles do still work on my Firefox and my Chrome, on Windows 7, right now. I can't comment on Mac. – Martin Oct 10 '15 at 02:36
  • 1
    Yes, I think the problem only occurs on a mac IIRC. It's probably fair to say it's a bug on OSX chrome. – CpnCrunch Oct 10 '15 at 02:47
  • I also see the same bug on the Mac - it doesn't honor the font. But for whatever reason, if I _also_ change the font color and background color in my style, then it starts honoring the font. – Chris Torrence Dec 07 '15 at 02:42
-2

This works for me:

input[type=submit] {
    font-size: 1em;
}
Empx
  • 93
  • 10
nico_lrx
  • 715
  • 1
  • 19
  • 36