Style Safari Input Type=Submit Buttons

In my HTML forms, I like to allow users to submit the form by pressing the Enter key, without JavaScript. The easiest way to do that is to include an <input type=submit> button.

<form>
  <input name="x">
  <input type="submit">
</form>

But beware: on Safari (and other WebKit browsers?), <input type=submit> buttons resist CSS styling.

<form>
  <input name="x">
  <style>
  .button {
    font-weight: bolder; /* THIS LINE DOES NOTHING IN SAFARI :-( */
  }
  </style>
  <input class="button" type="submit">
</form>

TIL: if you want to force them to be styled, you can use a WebKit proprietary CSS property, -webkit-appearance: none.

<form>
  <input name="x">
  <style>
  .button {
    -webkit-appearance: none;
    font-weight: bolder;
  }
  </style>
  <input class="button" type="submit">
</form>

If you do that, your buttons will look pretty ugly at first, but with a little work, you can make really cool CSS buttons.