Styling form buttons on the iphone: -webkit-appearance

Techniques for styling "form buttons" are well known to themers, and certainly to themers who develop for smarthphones that understand some CSS3, things become very easy.

However, recently we ran into some issues with iPhones that show a glare if we theme our buttons...

<input type="submit" name="submit" value="submit" id="submit" />
 
<script type="text/css">
#submit {
  color: #fff;
  width: 135px;
  height: 30px;
  border: none;
  background: #E00 ;
  -webkit-border-radius: 5px;
}
</style>

Click here to view full size

However, there appears to be a "hidden" css property that is not findable on Google and there is no trace in the Safari documentation.

 -webkit-appearance: none;

By adding the above line to your CSS you get the following screen (as we wanted):

Click here to view full size

The final code is:

<input type="submit" name="submit" value="submit" id="submit" />
 
<style type="text/css">
#submit {
  color: #fff;
  width: 135px;
  height: 30px;
  border: none;
  background: #E00 ;
  -webkit-border-radius: 5px;
  -webkit-appearance: none;
}
</style>