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
-
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.
-
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.
-
3 FREE Apps to protect your PC
A few free apps to help you protect your PC.
-
Web Browsing Tips #1: Find in Page
Find copy in page in a web page.
-
Web Browsing Tips #2: Tabbed Windows
Using tabbed windows in your web browser.
-
Web Browsing Tips #3: Keyboard Shortcuts
Some web browsing keyboard shortcuts.
-
Redirect your site the Search Engine Friendly way
Using a 301 redirect is important when you change your website URL or web page URL.
-
Remove the WordPress Meta Tag from your Blog
Remove the WordPress meta tag from your WordPress site with this small function.
-
Stay secure, use more than one password
We need passwords for everything, but how can we stay secure and have multiple passwords without having to remember them all.
-
Forward your emails to one address
Find out how, using cPanel, you can forward your emails to one email address.
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 🙂