Can't style text on input submit button as bold?

Question

I'm trying to style the font in an input button as bold.

Here's my code:

<input type="submit" id="nm-match" class="nm-button" value="Match" />

Here's my CSS:

.nm-button {
  text-transform: uppercase;
  padding: 5px;
  color: blue;
  font-weight: bold;
}

All the styles are being applied apart from the bold.

Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/

UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:

enter image description here

UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/

enter image description here

works fine in chrome here. chrome's bold isn't the same as FF's though. It's "less bold", but still bolder than normal text. — Marc B, Feb 09 '14 at 20:32
AFAIK, the numeric value for 'bold' font-weight is 700, not 600 — Ilya Streltsyn, Feb 09 '14 at 20:32
Seems to be an issue in chrome only. See this fiddle in both Chrome and Firefox. http://jsfiddle.net/CJg43/22/ In chrome, all 2 button have normal text. In firefox, the bold is being respected in 2nd and 3rd button. (P.S. The tests were done on Macbook Pro. `Chrome version 32.0.1700.107` and `Firefox version 26.0`. — Shiva, Feb 09 '14 at 20:44
possible duplicate of [Chrome not respecting font weight?](http://stackoverflow.com/questions/15249654/chrome-not-respecting-font-weight) — Shiva, Feb 09 '14 at 20:44

score 7 · Answer 1 · answered Feb 09 '14 at 20:33

7

When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700

.nm-button {
  text-transform: uppercase;
  padding: 5px;
  color: blue;
  font-weight: 700;
}

Js Fiddle Demo

answered Feb 09 '14 at 20:33

Sachin

40,216
7
90
102

i just used font-weight: 600; to make submit button text bold, works fine, thank you. – Shaiju T Mar 30 '15 at 07:27

pschueller · Accepted Answer · 2014-02-09T20:41:03.420

7

Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.

edited Feb 09 '14 at 20:41

answered Feb 09 '14 at 20:35

pschueller

4,362
2
27
50

i have no idea but that sound most plausible – john Smith Feb 09 '14 at 20:37
What are the default Aqua styles, and how can I turn them off?! – flossfan Feb 09 '14 at 20:51
They are the default styles applied to buttons by chrome on MacOS. Try this in your css: `-webkit-appearance: button;`. – pschueller Feb 09 '14 at 20:53

Can't style text on input submit button as bold?

2 Answers2

Linked

Related