iOS强制圆角和眩光输入 [英] iOS forces rounded corners and glare on inputs

问题描述

iOS设备在表单输入上添加了很多恼人的样式，特别是在输入[type = submit]上。

iOS devices add a lot of annoying styles on form inputs, particularly on input[type=submit]. Shown below are the same simple search form on a desktop browser, and on an iPad.

桌面：

桌面浏览器和iPad上显示的是同样的简单搜索表单。

iPad：

输入[ type = text]使用CSS框阴影插入，我甚至指定-webkit-border-radius：none;显然被覆盖。我的输入的颜色和形状[type = submit]按钮在iPad上完全混蛋。有人知道我可以做些什么来解决这个问题吗？提前感谢。

The input[type=text] uses a CSS box shadow inset and I even specified -webkit-border-radius:none; which apparently gets overridden. The color and shape of my input[type=submit] button gets completely bastardized on the iPad. Does anyone know what I can do to fix this? Thanks in advance.

推荐答案

我工作的版本是：

input {
    -webkit-appearance: none;
}

在某些webkit浏览器版本中，您可能还面临着 border-radius 仍在原地。使用以下选项重置：

In some webkit browser versions, you may also be faced with the border-radius still being in place. Reset with the following:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

这可以扩展适用于所有webkit样式 ，，，， code>或 textarea 。

This can be extended to apply to all webkit styled form components such as input, select, button or textarea.

参考原始问题， 'none'当清除任何基于单元的CSS元素。
还要注意，这隐藏了Chrome中的复选框，所以可能使用 input [type = text] 或 input：not（[ type = checkbox]），input：not（[type = radio]）。

In reference to the original question, you wouldn't use the value 'none' when clearing any unit based css element. Also be aware that this hides checkboxes in Chrome, so perhaps use something like input[type=text] or input:not([type=checkbox]), input:not([type=radio]) instead.

这篇关于iOS强制圆角和眩光输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！