Skip to content

If you have a “Submit” button on a form, it’s likely that you would like to style the button to match with the rest of the page instead of relying on each browser to display it however it wants.

You’ve probably discovered that both mobile Safari and Chrome take over the styling of your button and ignore any border-radius property you’ve defined. The desktop versions of Safari and Chrome both handle border-radius properly, so why not their mobile versions? Fortunately it’s an easy fix.

When styling your input button, you just need to add 3 lines of code to remove the mobile browser defaults. Without setting appear: none, mobile Safari and Chrome will apply their default styles and ignore your CSS.

input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;