237

I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?

Improve this question

6 Answers 6

Reset to default
559

You may be looking for 

-webkit-appearance: none;
Improve this answer
8
  • There is still a difference in button depress/:active styling, right? It ignores your styles and applies a semitransparent grey overlay?
    – Alan H.
    Commented Sep 7, 2011 at 16:40
  • 6
    If you're using SCSS, use @include experimental(appearance, none);
    – Sam Soffes
    Commented Apr 17, 2012 at 8:27
  • 1
    The link above is now dead, unfortunately (thinkvitamin.com/design/…).
    – Per Quested Aronsson
    Commented Sep 5, 2012 at 11:00
  • One issue with this is that for <select> boxes, it doesn't display the arrow when on a Desktop browser. So this is best paired with a media query I think.
    – andrewtweber
    Commented Mar 19, 2013 at 2:21
  • What... Was it really this simple? I used a lot of CSS lines to style it and this line was enough to do the trick?!
    – user2742371
    Commented Dec 17, 2013 at 14:31
39

Please add this css code

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Improve this answer
11

I recently came across this problem myself.

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

Hope that helps.

Improve this answer
2
  • 3
    That still doesn't allow me to change the height of a button. Funny thing though, as soon as I give the button a custom width the custom height is also taken into account.
    – flu
    Commented Sep 13, 2012 at 8:49
  • This was the fix for UIkit v3.
    – Kalob Taulien
    Commented Jun 17, 2018 at 18:40
7

Use the below css

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none; /*For Chrome*/
  -moz-appearance: none;/*For Mozilla*/
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />

Improve this answer
1

I had the same issue today using primefaces (primeng) and angular 7. Add the following to your style.css

p-button {
   -webkit-appearance: none !important;
}

!important is necessary because I am also using a bit of bootstrap which has a reboot.css, that overrides the appearance like this:

button {
  -webkit-appearance: button;
}
Improve this answer
-2

-webkit-appearance: none;

Note : use bootstrap to style a button.Its common for responsive.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.