IOS forces rounded corners and highlights on inputs

Question

iOS devices add a lot of annoying styles to form inputs, especially to [type = submit] input. The following are simple search forms on a desktop browser and on an iPad.

Desktop:

IPad:

The input [type = text] uses the CSS shadow box insert, and I even specified -webkit-border-radius: none; which is apparently being redefined. The color and shape of my input button [type = submit] completely depreciate on the iPad. Does anyone know what I can do to fix this? Thanks in advance.

Answer 1

In my version there was a version:

input { -webkit-appearance: none; } 

In some versions of the webkit browser, you may also find that border-radius is still in place. Reset with the following:

 input { -webkit-border-radius:0; border-radius:0; } 

This can be extended by applying the form webkite to all form components, such as input , select , button or textarea .

In relation to the original question, you will not use the value "none" when clearing the element based css element. Also keep in mind that this hides checkboxes in Chrome, so maybe use something like input[type=text] or input:not([type=checkbox]), input:not([type=radio]) instead input:not([type=checkbox]), input:not([type=radio])

Answer 2

You can get rid of a few more forms of web whale, input, etc. with the help of this:

 input, textarea, select { -webkit-appearance: none; } 

Answer 3

For the submit button, do not use:

 <input type="submit" class="yourstylehere" value="submit" /> 

Use the button tag instead:

 <button type="submit" class="yourstylehere">Submit</button> 

It worked for me.

Answer 4

look normalize.css

There is a demo where you can test form elements and see how they look in ios. There are several web kit oriented properties.

Answer 5

This is what I use in my projects.

 * { -webkit-tap-highlight-color: transparent; } a, article, div, h1, h2, h3, h4, h5, h6, img, section, span { -moz-user-select: none; -webkit-user-select: none; } input, select, textarea { -webkit-appearance: none; -webkit-border-radius:0; border-radius: 0; } 

Answer 6

You also get this problem in some browsers if you have the following:

 <a class="btn btn-primary" href="#" type="button">Link</a> 

instead:

 <a class="btn btn-primary" href="#" role="button">Link</a> 

This can happen if you change your input element to anker element and forget to change type to role .

I had this problem on Chrome and Safari on my iPad.