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??
Asked
Active
Viewed 1.2e+01k times
240
-
2possible 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 Answers
491
oops! just found myself: just add this line on any element you need
-webkit-appearance: none;
Francesco
- 23,000
- 25
- 96
- 139
-
29
-
28Brilliant, 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
-
2I wish I would have done this google search 12 hours ago... THANK YOU. – Elly Post May 27 '16 at 16:46
-
1Really Great! haven't thought this kind of issue us also occurred in iOS!Once again thank you very much for this! – Saurabh Prajapati Jul 21 '17 at 13:16
-
51
Add this code into the css file:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
This will help.
Samvel Aleqsanyan
- 2,495
- 4
- 18
- 27
subindas pm
- 1,894
- 18
- 15
-
1
-
1@peterkodermac please don't forget to add parent CSS class, otherwise, this may affect every input field. – subindas pm Dec 02 '19 at 03:54
10
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
- 142
- 2
- 7
Priyank Thakkar
- 4,280
- 16
- 49
- 87