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

Posted 2023-02-19

【中文标题】在 iPad/iPhone 上的 CSS 提交按钮奇怪的渲染

【英文标题】：CSS submit button weird rendering on iPad/iPhone

【发布时间】：2011-07-23 06:05:00

【问题描述】：

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

【问题讨论】：

css styling for input buttons on ipad / iphone 的可能重复项

【参考方案1】：

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

   -webkit-appearance: none;

【讨论】：

我爱你，*** 和 @Francesco

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

Compass 也有一个 mixin compass-style.org/reference/compass/css3/appearance

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

真的很棒！没想到ios也出现了这种问题！再次非常感谢！

【参考方案2】：

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

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

这会有所帮助。

【讨论】：

太棒了！表单提交按钮现在看起来应该在我的 iPad 上

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

【参考方案3】：

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

-webkit-appearance:none;
opacity: 1

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

【讨论】：

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