CSS iPad 和 iPhone 的样式输入按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5449412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling input buttons for iPad and iPhone
提问by mheavers
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?
我在我的网站上使用 CSS 来设置输入按钮的样式，但在 IOS 设备上，样式被 Mac 的默认按钮取代。有没有办法为 iOS 设置按钮样式，或者有办法制作一个行为类似于提交按钮的超链接？
回答by Jonas G. Drange
You may be looking for
您可能正在寻找
-webkit-appearance: none;
- Safari CSS notes on
-webkit-appearance - Mozilla Developer Network's
-moz-appearance
- Safari CSS 注释
-webkit-appearance - Mozilla 开发者网络
-moz-appearance
回答by subindas pm
Please add this css code
请添加此css代码
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
回答by Digital Robot Gorilla
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.
希望有帮助。
回答by vinod
Use the below css
使用下面的css
input[type="submit"] {
font-size: 20px;
background: pink;
border: none;
padding: 10px 20px;
}
.flat-btn {
-webkit-appearance: none;
-moz-appearance: none;
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!" />回答by djnose
I had the same issue today using primefaces (primeng) and angular 7. Add the following to your style.css
我今天在使用 primefaces (primeng) 和 angular 7 时遇到了同样的问题。将以下内容添加到您的 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)
我还使用了一些引导程序，它有一个 reboot.css，它覆盖了它（这就是我必须添加的原因！重要）
button {
-webkit-appearance: button;
}
}
回答by Karthiha Karthi
-webkit-appearance: none;
-webkit 外观：无；
Note : use bootstrap to style a button.Its common for responsive.
注意：使用 bootstrap 来设置按钮的样式。它通常用于响应式。
