在iPad / iPhone上CSS提交按钮奇怪的渲染

Question

我注意到如果我使用半径，颜色和边框用CSS设置我的按钮样式，它们看起来不错，但在iphone / ipad / ipod中它们看起来很糟糕......应该与Safari桌面中的渲染不一样？

Answer 1

糟糕！刚发现自己： 只需在您需要的任何元素上添加此行

   -webkit-appearance: none;

Answer 2

将此代码添加到css文件中：

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

这会有所帮助。

Answer 3

上面关于webkit外观的答案起到了神奇的作用，但是与其他设备/台式机上的浏览器相比，该按钮仍然显得苍白/暗淡。我还必须将不透明度设置为完全（范围从0到1）

-webkit-appearance:none;
opactiy: 1

设置不透明度后，该按钮在所有不同的设备/仿真器/桌面上看起来都相同。