Stop iOS styling your input fields and buttons
Apple iOS insists on styling up your buttons and input fields, but if you want to stop that then find out how.
So, you’re designed a lovely website only to find out Apple’s iOS decides it wants to take the design into it’s control by styling your input fields i.e. adding rounded corners and dropshadows to text fields and input buttons. Well, it’s a very simple fix. Just add this to any input fields or buttons you don’t want restyling…
-webkit-appearance: none; border-radius: 0;
Now, if you are using rounded corners in your CSS then you can can leave out the border-radius selector.
UPDATE:
This is not the best way to do this as it certain things such as checkboxes will not display! It’s therefore best to target certain fields i.e.
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}
15 replies on “Stop iOS styling your input fields and buttons”
Leave a Reply
-
Moving from iPhone to Android whilst using a Mac
A useful guide on what to do and how to keep things in sync between devices.
-
HTML email signature in Apple Mail
Step by step guide on how to add an HTML signature to Apple Mail.
-
Secure your WordPress Blog
A guide to securing your WordPress website.
-
HTML email signature in Gmail
How to add a HTML signature in Gmail, without any text-decoration for links
-
Remove p tags from category description
By default Wordpress adds paragraph tags to category descriptions. Find out how to stop this.
-
DIV align bottom right (or left!)
Find out how to align a DIV to the bottom left or right.
-
Website Dimensions and Designing for the Web
What browser size should you design your website. Find out more.
-
Root Path and Configuration of your Website using php
Display the root path and configuration of your website by uploading a php file to your website.
-
HTML email signature in Zoho Mail
How to add a HTML signature in Zoho Mail. A very easy and stable solution.
-
FREE EU Cookie Law Script
If you haven’t already implemented the changes then we’ve put together a little bit of code to help you.
-
Remove the shadow from Mac Screen Grabs
How to remove the shadow from Apple Screengrabs.
-
10 Useful Sites for Web Developers
Some useful websites for web developers.
Don’t forget input[type=”search”] or just use:
-webkit-appearance: none !important;
If you are still finding this on Google, you will need to add a few more input types to the rule above, such as:
[type=”email”]
[type=”tel”]
[type=”number”]
Wow that easy, had to add to Bootstrap 4!!
YOU ARE THE MAN
Does it works for select elements. As I have background color on select as well as options but they are not showing on ipad or iphone.
How do I apply this to checkboxes? EDIT: Better question since this can’t be applied to checkboxes. How do I fix stupid broken checkboxes on ios?
THANK YOU!
Thanks !
4 years late to the party, but I love you!
Great, Thanks a lot. This was What i was looking for!
Where should i add this in say i have a site with WordPress plugin Contact form 7? Newbie
And also so it doesent change the font?
In your theme’s stylesheet
You beauty! I’d made a lovely looking site and then iOS was destroying the submit buttons… this worked perfectly, thank you!
No worries. Glad it worked.
Thanks for the tip! Worked perfectly 🙂