Styling input buttons for iPad and iPhone

Question

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?

Coraciiform

Answer 1

You may be looking for

-webkit-appearance: none;

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

Aurelia

There is still a difference in button depress/:active styling, right? It ignores your styles and applies a semitransparent grey overlay? – Volumeter

If you're using SCSS, use @include experimental(appearance, none); – Vano

The link above is now dead, unfortunately (thinkvitamin.com/design/…). – Wagonage

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. – Consolata

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?! – Dannica

Did not work for me, on IPAD1... submit button still is rounded... not respecting css rules... – Quiteris

@FlashThunder Have you tried adding border-radius: 0 too? – Helico

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. – Covet

Answer 2

Please add this css code

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Swaziland

Answer 3

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.

Gorblimey

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. – Betaine

This was the fix for UIkit v3. – Edmonson

Answer 4

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!" />

Potshot

Answer 5

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;

}

Arbil

Answer 6

-webkit-appearance: none;

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

Haemolysin