iOS devices add a lot of annoying styles on form inputs, particularly on input[type=submit]. Shown below are the same simple search form on a desktop browser, and on an iPad.
Desktop:
iPad:
The input[type=text] uses a CSS box shadow inset and I even specified -webkit-border-radius:none; which apparently gets overridden. The color and shape of my input[type=submit] button gets completely bastardized on the iPad. Does anyone know what I can do to fix this? Thanks in advance.
Best Answer
The version I had working is:
In some webkit browser versions, you may also be faced with the
border-radius
still being in place. Reset with the following:This can be extended to apply to all webkit styled
form
components such asinput
,select
,button
ortextarea
.In reference to the original question, you wouldn't use the value 'none' when clearing any unit based css element. Also be aware that this hides checkboxes in Chrome, so perhaps use something like
input[type=text]
orinput[type=submit], input[type=text]
or instead filter out those that don't use rounded corner settings such asinput:not([type=checkbox]), input:not([type=radio])
.