css - iOS 强制输入圆 Angular 和眩光

Question

iOS 设备在表单输入上添加了很多烦人的样式，尤其是在 input[type=submit] 上。下面显示的是桌面浏览器和 iPad 上的相同简单搜索表单。

桌面:

iPad:

input[type=text] 使用 CSS box shadow inset 我什至指定了 -webkit-border-radius:none;这显然被覆盖了。我的 input[type=submit] 按钮的颜色和形状在 iPad 上完全乱七八糟。有谁知道我能做些什么来解决这个问题？提前致谢。

Answer 1

我使用的版本是:

input {
    -webkit-appearance: none;
}

在某些 webkit 浏览器版本中，您可能还会遇到 border-radius 仍然存在的问题。使用以下内容重置:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

这可以扩展到适用于所有 webkit 样式的 form 组件，例如 input、select、button或 textarea。

关于原始问题，在清除任何基于单元的 css 元素时，您不会使用值“none”。另请注意，这会隐藏 Chrome 中的复选框，因此可能使用类似 input[type=text] 或 input[type=submit]、input[type=text] 或而是过滤掉那些不使用圆 Angular 设置的设置，例如 input:not([type=checkbox]), input:not([type=radio])。