[iphone] CSS submit button weird rendering on iPad/iPhone

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

This question is related to iphone css ipad mobile-safari mobile-webkit

The answer is


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.


Add this code into the css file:

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

This will help.


Examples related to iphone

Detect if the device is iPhone X Xcode 8 shows error that provisioning profile doesn't include signing certificate Access files in /var/mobile/Containers/Data/Application without jailbreaking iPhone Certificate has either expired or has been revoked Missing Compliance in Status when I add built for internal testing in Test Flight.How to solve? cordova run with ios error .. Error code 65 for command: xcodebuild with args: "Could not find Developer Disk Image" Reason: no suitable image found iPad Multitasking support requires these orientations How to insert new cell into UITableView in Swift

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to ipad

What is correct media query for IPad Pro? iPad Multitasking support requires these orientations How to restrict UITextField to take only numbers in Swift? How to present a modal atop the current view in Swift Presenting a UIAlertController properly on an iPad using iOS 8 Detect current device with UI_USER_INTERFACE_IDIOM() in Swift HTML5 Video tag not working in Safari , iPhone and iPad Install .ipa to iPad with or without iTunes How to hide UINavigationBar 1px bottom line How to fix UITableView separator on iOS 7?

Examples related to mobile-safari

disable viewport zooming iOS 10+ safari? iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? HTML5 Video tag not working in Safari , iPhone and iPad CSS background-size: cover replacement for Mobile Safari Setting format and value in input type="date" Mobile overflow:scroll and overflow-scrolling: touch // prevent viewport "bounce" How to check if an app is installed from a web-page on an iPhone? Is Safari on iOS 6 caching $.ajax results? How to launch Safari and open URL from iOS app Simplest way to detect a pinch

Examples related to mobile-webkit

Is there a real solution to debug cordova apps Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image How to flip background image using CSS? CSS submit button weird rendering on iPad/iPhone