css - 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:

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

Answer 1

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;.