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

问题描述

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

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:

输入[type=text] 使用CSS 框阴影插入，我什至指定了-webkit-border-radius:none;这显然被覆盖了.我的 input[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 样式的 form 组件，例如 input、select、button或 textarea.

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

参考原始问题，在清除任何基于单位的 css 元素时，您不会使用值none".另请注意，这会隐藏 Chrome 中的复选框，因此可以使用类似 input[type=text] 或 input[type=submit], 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[type=submit], input[type=text] or instead filter out those that don't use rounded corner settings such as input:not([type=checkbox]), input:not([type=radio]).

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