iPad input button styling

css, forms, ipad

Solution

You need to use `-webkit-appearance:none` in your `.mailBtn` class. Also, if you have rounded corners at `input` fields, you can use `-webkit-border-radius:0`.

I usually reset both properties in my form elements like below:

input, textarea, button {
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;

    -webkit-border-radius: 0; 
}

...so that I keep style consistency between browsers.

Problem

I have inconsistencies in styling of a form button mainly when viewing in iPad. For some reason CSS styles for `background-color` and `padding` do not apply in iPad. I get the default looking button, with gradient and round corners, which is not what I want. I also want to avoid using an image. CSS ``` .mailBtn { background: #fff; border:0; color: #000; font: 0.625em 'SansPro Light',sans-serif; margin: 0 0 0 -3px; padding: 11px 7px 10px; text-transform: uppercase; } ``` HTML ``` <input type="submit" value="Send" class="mailBtn"> ``` Any ideas as to how can I keep styling consistent across platforms with pure CSS?

Original source