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; }
iOS Styled Button!
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.
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- Make a div fill the height of the remaining screen space
- How to disable text selection highlighting
- Is there a CSS parent selector?
- How do I style a <select> dropdown with only CSS?
- Turn off iPhone/Safari input element rounding
- Transitions on the CSS display property
- How can I remove a style added with .css() function?
- wildcard * in CSS for classes
- Is it possible to apply CSS to half of a character?
@include experimental(appearance, none);<select>boxes, it doesn't display the arrow when on a Desktop browser. So this is best paired with a media query I think.CSSlines to style it and this line was enough to do the trick?!