264

I noticed that if I style my buttons with CSS using radius, colors and borders, they look good but in the iphone/ipad/ipod they look terrible...shouldn't be the same rendering as in Safari Desktop??

enter image description here

Francesco
  • 24,839
  • 29
  • 105
  • 152
  • 2
    possible duplicate of [css styling for input buttons on ipad / iphone](http://stackoverflow.com/questions/5449412/css-styling-for-input-buttons-on-ipad-iphone) – skolima Oct 21 '12 at 19:05

3 Answers3

525

Oops! I just found this myself. Just add this line on any element you need:

   -webkit-appearance: none;
Nat Riddle
  • 928
  • 1
  • 10
  • 24
Francesco
  • 24,839
  • 29
  • 105
  • 152
  • 37
    i love you, stackoverflow, and @Francesco – jahrichie Apr 25 '13 at 21:59
  • 30
    Brilliant, and [here](http://css-tricks.com/almanac/properties/a/appearance/) is a great article about it from CSS tricks. It lists all the other elements changed by WebKit and Mozilla. – Patrick Jun 06 '13 at 11:25
  • Compass has a mixin for this as well http://compass-style.org/reference/compass/css3/appearance/ – Patrick Beeson Aug 08 '14 at 20:47
64

Add this code into the css file:

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

This will help.

Samvel Aleqsanyan
  • 2,812
  • 4
  • 20
  • 28
subindas pm
  • 2,668
  • 25
  • 18
12

The above answer for webkit appearance worked, but the button still looked kind pale/dull compared to the browser on other devices/desktop. I also had to set opacity to full (ranges from 0 to 1)

-webkit-appearance:none;
opacity: 1

After setting the opacity, the button looked the same on all the different devices/emulator/desktop.

drewmerk
  • 332
  • 4
  • 10
Priyank Thakkar
  • 4,752
  • 19
  • 57
  • 93