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