iOS在输入框上强制使用圆角和反光效果。

6 浏览
0 Comments

iOS在输入框上强制使用圆角和反光效果。

iOS设备在表单输入上添加了很多烦人的样式，特别是在input[type=submit]上。下面展示的是在桌面浏览器和iPad上相同的简单搜索表单。\n桌面：\n\"桌面\"\niPad：\n\"iPad\"\ninput[type=text]使用了CSS的内嵌阴影和我甚至指定了-webkit-border-radius:none;，但这显然被覆盖了。在iPad上，我input[type=submit]按钮的颜色和形状完全被扭曲了。有人知道我该怎么修复这个问题吗？

0

3 答案

0 Comments

问题出现的原因是iOS系统对于标签的样式有默认的圆角和光泽效果。解决方法是使用

0
0 Comments

iOS设备在输入框上强制显示圆角和光泽效果的原因是因为其默认样式中包含了这些属性。为了去除这些样式，可以使用以下代码：input, textarea, select { -webkit-appearance: none; }。这样可以移除iOS设备默认的圆角和光泽效果。如果还希望完全重置输入框的样式，可以添加border-radius: 0;来去除圆角效果。如果仅需要设置特定的圆角大小，可以设置border-radius属性。

0
0 Comments

问题的出现原因是iOS系统对输入框进行了圆角和光晕的强制处理，导致在某些webkit浏览器版本中，即使使用了-webkit-appearance: none;属性，border-radius仍然存在。解决方法是通过添加以下代码来重置border-radius属性：input { -webkit-border-radius: 0; border-radius: 0; }。该方法可以用于所有webkit样式的form组件，如input、select、button或textarea。

此外，需要注意的是，这会在Chrome中隐藏复选框，因此可以使用input[type=text]或input[type=submit], input[type=text]来过滤掉不使用圆角设置的选项。另外，-webkit-appearance: none;属性在Chrome中不是有效的解决方法。

对于避免在Chrome中出现问题，使用input:not([type=checkbox]), input:not([type=radio])可以更好地处理。但这种方法不适用于IE<=8，不过这并不是要解决的问题。

最后，使用input[type=submit], input[type=text]可以确保样式仅应用于Safari中的按钮，因为只有满足这两个条件之一的按钮才会被选中。编辑后的代码不会过滤掉任何按钮，这是不正确的。

0