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?

Muhammad Saifullah
  • 4,292
  • 1
  • 29
  • 59
mheavers
  • 29,530
  • 58
  • 194
  • 315

6 Answers6

558

You may be looking for 

-webkit-appearance: none;
Jonas G. Drange
  • 8,749
  • 2
  • 27
  • 38
  • There is still a difference in button depress/:active styling, right? It ignores your styles and applies a semitransparent grey overlay? – Alan H. Sep 07 '11 at 16:40
  • 6
    If you're using SCSS, use `@include experimental(appearance, none);` – Sam Soffes Apr 17 '12 at 08:27
  • 1
    The link above is now dead, unfortunately (http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/). – Per Quested Aronsson Sep 05 '12 at 11:00
  • One issue with this is that for ` – andrewtweber Mar 19 '13 at 02: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?! –  Dec 17 '13 at 14:31
  • Did not work for me, on IPAD1... submit button still is rounded... not respecting css rules... – Flash Thunder Mar 11 '14 at 22:01
  • @FlashThunder Have you tried adding `border-radius: 0` too? – Barnee Sep 18 '14 at 10:52
  • Can I actualy spit on this behaviour of Safari and any browser following this?! Really it's a PitA to do this things.. I mean it's ok that they want to add their specific rules, but it's so annoying that you have to do the tiny extra bit of cake to every browser. It's 2016 and I still have to use vendor prefixes and solutions like that. I hate it. I have to use it on the newest Safari browser right now.. really.. pure hate! +1 for your solution. – Cagatay Ulubay Mar 07 '16 at 15:29
39

Please add this css code

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
subindas pm
  • 2,668
  • 25
  • 18
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.

Digital Robot Gorilla
  • 397
  • 1
  • 5
  • 13
  • 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 Sep 13 '12 at 08:49
  • This was the fix for UIkit v3. – Kalob Taulien Jun 17 '18 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!" />
vinod
  • 260
  • 3
  • 12
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;
}

i am also using a bit of bootstrap which has a reboot.css, that overrides it with (thats why i had to add !important)

button {
  -webkit-appearance: button;

}

djnose
  • 917
  • 7
  • 19
-2

-webkit-appearance: none;

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

Karthiha Karthi
  • 20
  • 1