Why submit input style does not apply on Chrome neither on Safari (Mac), but only if I apply a background-color?

Question

I have a simple Web page in which the CSS style rules do not apply on the button of the form, if I am on Chrome or Safari (Mac OS X, Yosemite). It does apply on Firefox. And it does apply on Chrome and Safari if I use a background-color property.

Look at the following example. The save button does not have Roboto Mono font, as it should be. This problem occurs only if you open the page on Chrome or Safari. It works perfect on Firefox.

On top of that, if I apply a style like background-color on the button, then the font Roboto Mono, suddenly, works as expected and it is applied on the button too.

Here is the code that I have used.

http://jsbin.com/foqiso/edit?html,css,output

Any clue why the button does not take the font specified, but only if

• I am on Firefox OR
• I am on Chrome or Safari and I apply a background-color

?

Update: There is also another workaround. Instead of using <input type="submit" value="Save">, if I use <button type=submit>Save</button>, then button is styled with the font I am expecting.

Answer 1

Its your webkit styling. Add this:

input[type=submit]{
  -webkit-appearance: button;
}

This is Webkit only

Cheers