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