CSS submit button weird rendering on iPad/iPhone

iphone css ipad mobile-safari mobile-webkit

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??

https://i.stack.imgur.com/PsQOV.jpg

possible duplicate of css styling for input buttons on ipad / iphone

Nat Riddle

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

   -webkit-appearance: none;

i love you, stackoverflow, and @Francesco

Brilliant, and here is a great article about it from CSS tricks. It lists all the other elements changed by WebKit and Mozilla.

Compass has a mixin for this as well compass-style.org/reference/compass/css3/appearance

I wish I would have done this google search 12 hours ago... THANK YOU.

Really Great! haven't thought this kind of issue us also occurred in iOS!Once again thank you very much for this!

Samvel Aleqsanyan

Add this code into the css file:

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

This will help.

Great! Form submit button now looks as it should on my iPad

@peterkodermac please don't forget to add parent CSS class, otherwise, this may affect every input field.

drewmerk

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.

Setting the opacity was necessary for me as well.

I still get strange blue background on mobile for some reason.

CSS submit button weird rendering on iPad/iPhone

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US