Styling Issues Of Form Fields In iOS Devices

• September 8, 2015
• Leave a comment

Different features of the iOS programming devices need concentrated focus to eliminate any unwanted automated function. One such function could be the addition of a lot of annoying styles to form fields, particularly on input [type=submit]. This could overwrite your styling on iOS devices. For example this is how a form could be set by a programmer in desktop view:

And this is how it could appear due to some undesired automation in iOS devices:

In order to resolve this issue, you need to make a few CSS changes.

Changes Required To Overcome Styling Issues:

In the first step, you need to set web-kit appearance to none. With this action, you are actually disallowing the browsers from implementing their own styling on your inputs. It should be done like this:

You may also be faced with the border-radius still being in place in some web-kit browser versions. You can overcome this issue with the following input:

You can extend this to apply to all web-kit form styles components such as input, select button or text-area:

After adding the above CSS in your stylesheet, please refresh your page on iOS devices. With all these refinements made, It must look the same as it looked on desktop version.