iOS 强制输入圆角和眩光答案

【问题标题】：iOS forces rounded corners and glare on inputsiOS 强制输入圆角和眩光
【发布时间】：2011-09-29 15:17:00
【问题描述】：

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

桌面：

iPad：

输入[type=text] 使用 CSS 盒子阴影插图，我什至指定了 -webkit-border-radius:none;这显然被覆盖了。我的 input[type=submit] 按钮的颜色和形状在 iPad 上被完全搞砸了。有谁知道我能做些什么来解决这个问题？提前致谢。

【问题讨论】：

-webkit-外观：无；有助于消除大多数问题，但仍然不能消除两个元素之间的间隙或圆角。因此，我们将不胜感激任何帮助。谢谢。
你指定了-webkit-border-radius:none; 你指定了border-radius:none; 吗？
在 iOS 上指定 -webkit-appearance:none 和 -webkit-border-radius:0 对我有用！

标签： css ios forms

【解决方案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] 之类的东西，或者过滤掉那些不使用圆角设置的东西，例如 input:not([type=checkbox]), input:not([type=radio])。

【讨论】：

-webkit-外观：无；在 Chrome 中隐藏复选框 - 不是一个有效的解决方案！
-webkit-外观：无；成功了！（不需要-webkit-border-radius）
好点 - 确实取决于浏览器版本，我发现，所以这只是为了防止故障。我将编辑帖子的相关性。
input:not([type="checkbox"]) 会是避免 Chrome 出现问题的更好方法吗？尽管它在 IE
使用input:not([type=checkbox]), input:not([type=radio]) 意味着该样式适用于Safari 上的所有按钮，因为每个按钮都满足这两个条件之一。相反，我使用了input[type=submit], input[type=text]。

【解决方案2】：

您可以通过以下方式摆脱更多的 webkits 表单、输入等样式：

input, textarea, select {
   -webkit-appearance: none;
}

【讨论】：

它仍然需要border-radius: 0; 才能完全重置，并且不需要边框半径。否则只需设置border-radius。

【解决方案3】：

对于提交按钮，不要使用：

<input type="submit" class="yourstylehere" value="submit" />

改为使用按钮标签：

<button type="submit" class="yourstylehere">Submit</button>

这对我有用。

【讨论】：

FWIW，刚刚在一个项目中遇到了这个问题，我正在测试的 iPad 1 也为<button> 标签添加了样式。所以我认为你最好直接用 CSS 解决这个问题。

【解决方案4】：

看看normalize.css

有一个演示，您可以在其中测试表单元素并查看它们在 ios 中的外观。有多个面向 webkit 的属性。

【讨论】：

【解决方案5】：

这是我在项目中使用的

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}

【讨论】：

【解决方案6】：

如果您有以下情况，您也会在某些浏览器中遇到此问题：

<a class="btn btn-primary" href="#" type="button">Link</a>

代替：

<a class="btn btn-primary" href="#" role="button">Link</a>

如果您将输入元素更改为 anker 元素并忘记将 type 更改为 role，则会发生这种情况。

我在我的 iPad 上的 Chrome 和 Safari 上都遇到了这个问题。

【讨论】：