开发者

Styling input buttons for iPad and iPhone

开发者 https://www.devze.com 2023-02-19 21:13 出处:网络
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 but开发者_Go百科tons for iOS, or a way to maybe m

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 but开发者_Go百科tons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?


You may be looking for

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


Please add this css code

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


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.


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


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;

}


-webkit-appearance: none;

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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号