iOS强制输入出现圆角和眩光

94

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

桌面：

iPad：

的iPad

input [type = text]使用CSS框阴影插图，甚至指定了-webkit-border-radius：none;。显然被覆盖了。我的input [type = submit]按钮的颜色和形状在iPad上变得完全混为一谈。有谁知道我该怎么做才能解决此问题？提前致谢。

css ios forms

— 无机物
source

4

-webkit-appearance：无；帮助消除了大多数问题，但仍不能消除两个元素之间的间隙或圆角。因此，对此的任何帮助将不胜感激。谢谢。

— inorganik

2

您指定-webkit-border-radius:none;了border-radius:none;吗？

— Rigel Glen '10

7

指定-webkit-appearance:none并-webkit-border-radius:0在iOS上为我完成了窍门！

— Primus202

183

我使用的版本是：

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])将适用于所有输入类型，因为每个输入都满足这两个条件之一）。

— Markyzm
source

5

-webkit-appearance：无；在Chrome中隐藏复选框-不是有效的解决方案！

— Nico Westerdale 2014年

2

-webkit-appearance：无；绝招！（-webkit-border-radius不需要）

— OZZIE 2014年

好点-我发现它确实取决于浏览器的版本，因此就在这里以提供故障保护。我将编辑相关帖子。

— marksyzm 2015年

3

input：not（[type =“ checkbox”]）是避免Chrome中出现此问题的更好方法？尽管它在IE <= 8中不起作用，但是再次重申，这不是您要解决的问题。

— 罗宾·法兰西

使用input:not([type=checkbox]), input:not([type=radio])表示样式适用于Safari上的所有按钮，因为每个按钮都满足这两个条件之一。相反，我使用input[type=submit], input[type=text]。

— miguelmorin

17

您可以使用以下方法摆脱一些其他Webkit表单，输入等的样式：

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

— 缺口
source

它仍然需要border-radius: 0;完全重置，并且不需要边界半径。否则就设置了border-radius。

— Refilon 2015年

3

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

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

而是使用button标签：

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

这对我有用。

— 数字机器人大猩猩
source

1

FWIW，只是在项目中遇到了这个问题，而我正在测试的iPad 1也为<button>标签添加了样式。因此，我认为您最好直接使用CSS解决此问题。

— neemzy 2013年

1

看看normalize.css

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

— 分辨率
source

1

这就是我在项目中使用的

* { 
    -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; 
}

— 瓦加尔·阿拉吉尔
source

0

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

<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上都遇到了这个问题。

— 短剑
source