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

1

3 Answers 3

525

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

   -webkit-appearance: none;
3
64

Add this code into the css file:

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

This will help.

2
  • 1
    Great! Form submit button now looks as it should on my iPad Nov 12, 2018 at 17:08
  • 2
    @peterkodermac please don't forget to add parent CSS class, otherwise, this may affect every input field. Dec 2, 2019 at 3:54
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.

2
  • 1
    Setting the opacity was necessary for me as well.
    – drewmerk
    Oct 6, 2020 at 22:17
  • I still get strange blue background on mobile for some reason.
    – Nathan B
    Jul 19, 2022 at 15:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.