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
-
Free up space on your Mac
You may not know it but there’s a lot of places on your shiny lovely Mac that can store lots of rubbish that you don’t actually need. We’ll explain a few places you can look to see if there’s a mass of files that you can safely delete and free up a few valuable gigs of space.
-
iPhone to Mac Wireless Networking
Connect to your jailbroken iPhone to your Mac to add or retrieve files and folders.
-
Is your site LIVE? FREE website monitoring sites
Keep a check on whether your website is live with these free and paid for tools.
-
Disable Flash in Chrome on Mac and PC
Sometimes you need to disable Flash. Maybe to test sites that run in both Flash and HTML and therefore automatically show you to the Flash elements or maybe you just don’t want Flash running in your browser. Whatever it is then here’s how to disable it in Chrome on a Mac.
-
Add category description if it exists
Find out how to add the category description to your category template in Wordpress.
-
iPhone Jailbreak for OS 3.0 Released
How to jailbreak your iPhone.
-
Backing up your Website using cPanel
Find out how to back up your website via cPanel
-
Domain Extensions. Are they important?
Does it make any difference what domain extension you choose? Find out more.
-
Web Browsing Tips #2: Tabbed Windows
Using tabbed windows in your web browser.
-
What's in a name? Choosing the right name for your company and website
Find out how to choose a great company name with a few basic tips.
-
Web Browsing Tips #3: Keyboard Shortcuts
Some web browsing keyboard shortcuts.
-
WordPress Login / Logout Link in Template
The standard Wordpress Login/Logout links often suffice but when you are building custom pages then the default Wordpress pages can look a little out of place on your site and therefore you may need to redirect your users to different pages and/or change the text links of those standard links.
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 🙂