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

iphone css ipad mobile-safari mobile-webkit

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

https://i.stack.imgur.com/PsQOV.jpg

Nat Riddle

哎呀！我自己发现了这个。只需将此行添加到您需要的任何元素上：

   -webkit-appearance: none;

我爱你，stackoverflow 和 @Francesco

太棒了，here 是一篇很棒的文章，来自 CSS 技巧。它列出了 WebKit 和 Mozilla 更改的所有其他元素。

Compass 也为此提供了一个 mixin compass-style.org/reference/compass/css3/appearance

我希望我能在 12 小时前完成这个谷歌搜索......谢谢。

非常好！没想到iOS也出现了这种问题！再次非常感谢您！

Samvel Aleqsanyan

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

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

这会有所帮助。

伟大的！表单提交按钮现在看起来应该在我的 iPad 上

@peterkodermac 请不要忘记添加父 CSS 类，否则，这可能会影响每个输入字段。

drewmerk

上述关于 webkit 外观的答案有效，但与其他设备/桌面上的浏览器相比，该按钮仍然显得苍白/沉闷。我还必须将不透明度设置为完全（范围从 0 到 1）

-webkit-appearance:none;
opacity: 1

设置不透明度后，按钮在所有不同的设备/模拟器/桌面上看起来都一样。

设置不透明度对我来说也是必要的。

由于某种原因，我仍然在手机上得到奇怪的蓝色背景。