iPad input button styling

Question

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?

Answer 1

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.

Answer 2

You may be looking for

-webkit-appearance: none;

• Safari CSS notes on --webkit-appearance
• Mozilla Developer Network's --moz-appearance

Ref Link