CODEWITHSUNDEEP
cssiosforms
inorganik
inorganik

Reputation: 25525

iOS forces rounded corners and glare on inputs

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:

Desktop

iPad:

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?

Upvotes: 97

Views: 95748

Answers (6)

marksyzm
marksyzm

Reputation: 5601

The version I had working is:

input {
    -webkit-appearance: none;
}

In some webkit browser versions, you may also be faced with the border-radius still being in place. Reset with the following:

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

This can be extended to apply to all webkit styled form components such as input, select, button or textarea.

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] or input[type=submit], input[type=text] or instead filter out those that don't use rounded corner settings such as input:not([type=checkbox]), input:not([type=radio]).

Upvotes: 188

Dirk
Dirk

Reputation: 21

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

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

instead of:

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

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

I had this problem on both Chrome and Safari on my IPad.

Upvotes: 0

Waqar Alamgir
Waqar Alamgir

Reputation: 9968

This is the 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; 
}

Upvotes: 1

nick
nick

Reputation: 3711

You can get rid of some more webkits form, input, etc. styling with this:

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

Upvotes: 17

Digital Robot Gorilla
Digital Robot Gorilla

Reputation: 397

For the submit button don't use:

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

Instead use the button tag:

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

This worked for me.

Upvotes: 3

Rdpi
Rdpi

Reputation: 581

have a look to normalize.css

There's a demo where you can test the form elements and see how they look like in ios. There are multiple webkit oriented properties.

Upvotes: 1

Related Questions