iphone overriding all of my styles on an input[type="submit"]

Question

I have isolated my input[type="submit"] in this JSFIDDLE.

The code as well,

input[type="submit"] {
    width: 100%;
    height: 40px;
    background: #FFD100;
    border-radius: 5px;
    box-shadow: 0 5px 0 #A58B1E;
    border: none;
    font-size: 20px;
    color: #2b2b2b;
    cursor: pointer;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

input[type="submit"]:active, input[type="submit"]:focus {
    box-shadow: 0 3px 0 #A58B1E;
    top: 2px;
    outline: none;
}

Everything look great except, when I checked the site on my iphone. Since my client wanted a responsive website I figured this button I made would look great on every device.

Oh boy, I was so wrong because on my iphone the button is truly hideous. I am including an image to what the mobile view looks like and the url to the site.

Any ideas why this is happening or how I can override it?

(Chatfield Drilling Live Site)

Submit button problem

possible duplicate of [css styling for input buttons on ipad / iphone](http://stackoverflow.com/questions/5449412/css-styling-for-input-buttons-on-ipad-iphone) — sshow, Feb 24 '14 at 13:07

score 14 · Accepted Answer · answered Dec 17 '13 at 17:01

14

You might be looking for:

-webkit-appearance: none;

answered Dec 17 '13 at 17:01

Gerico

5,079
14
44
85

Hmm that seemed to do the trick. Should I do this for every input I have? They all seem to display my styles just fine. – Josh Powell Dec 17 '13 at 17:04
I first came accross this when i was in need of a fix: http://trentwalton.com/2010/07/14/css-webkit-appearance/ - very useful to know - you can apply where you see fit – Gerico Dec 17 '13 at 17:15
.. also forgot to answer, yes you can use it on inputs / textareas – Gerico Dec 17 '13 at 17:17
Very interesting! Thank you so much for the article and I'm glad it was a easy fix. :] – Josh Powell Dec 17 '13 at 17:19

score 4 · Answer 2 · answered Dec 17 '13 at 17:15

4

You need to use -webkit-appearance:none in your button.

Also, if you have round corners at input fields you can use the following CSS:

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

answered Dec 17 '13 at 17:15

otinanai

3,987
3
25
43

iphone overriding all of my styles on an input[type="submit"]

2 Answers2