iOS强制圆角和眩光输入

Question

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

桌面：

ipad公司：

输入[type = text]使用CSS框阴影插图，我甚至指定了-webkit-border-radius：none;显然被覆盖了。我的输入[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:not([type=checkbox]), input:not([type=radio])之类的内容。

Answer 2

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

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

Answer 3

对于提交按钮，请勿使用：

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

而是使用按钮标记：

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

这对我有用。

Answer 4

查看normalize.css

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

Answer 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; 
}

Answer 6

如果您具有以下条件，则在某些浏览器中也会出现此问题：

openssl rsa -in key.txt -out key.txt

代替：

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

如果将输入元素更改为anker元素，而忘记将<a class="btn btn-primary" href="#" role="button">Link</a> 更改为type，则会发生这种情况。

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