Styling input buttons for iPad and iPhone
IphoneCssIosIpadIphone Problem Overview
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?
Iphone Solutions
Solution 1 - Iphone
You may be looking for
-webkit-appearance: none;
-
Safari CSS notes on
-webkit-appearance
-
Mozilla Developer Network's
-moz-appearance
Solution 2 - Iphone
Please add this css code
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Solution 3 - Iphone
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.
Solution 4 - Iphone
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!" />
Solution 5 - Iphone
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;
}
Solution 6 - Iphone
-webkit-appearance: none;
Note : use bootstrap to style a button.Its common for responsive.