CSS iOS 强制输入圆角和眩光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7599533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS forces rounded corners and glare on inputs
提问by inorganik
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.
iOS 设备在表单输入上添加了很多烦人的样式，特别是在 input[type=submit] 上。下面显示的是桌面浏览器和 iPad 上相同的简单搜索表单。
Desktop:
桌面：
iPad:
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[type=text] 使用 CSS 框阴影插入，我什至指定了 -webkit-border-radius:none; 这显然被覆盖了。我的 input[type=submit] 按钮的颜色和形状在 iPad 上完全被破坏了。有谁知道我能做些什么来解决这个问题？提前致谢。
回答by marksyzm
The version I had working is:
我工作的版本是：
input {
-webkit-appearance: none;
}
In some webkit browser versions, you may also be faced with the border-radiusstill being in place. Reset with the following:
在某些 webkit 浏览器版本中，您可能还会面临border-radius仍然存在的问题。使用以下内容重置：
input {
-webkit-border-radius:0;
border-radius:0;
}
This can be extended to apply to all webkit styled formcomponents such as input, select, buttonor textarea.
这可以扩展到适用于所有的webkit样式form组件，如input，select，button或textarea。
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.
关于原始问题，在清除任何基于单位的 css 元素时，您不会使用值 'none'。另请注意，这会隐藏 Chrome 中的复选框，因此可以使用类似input[type=text]或input:not([type=checkbox]), input:not([type=radio])代替的内容。
回答by nick
You can get rid of some more webkits form, input, etc. styling with this:
您可以通过以下方式摆脱更多 webkit 表单、输入等样式：
input, textarea, select {
-webkit-appearance: none;
}
回答by Digital Robot Gorilla
For the submit button don't use:
对于提交按钮不要使用：
<input type="submit" class="yourstylehere" value="submit" />
Instead use the button tag:
而是使用按钮标签：
<button type="submit" class="yourstylehere">Submit</button>
This worked for me.
这对我有用。
回答by Rdpi
have a look to normalize.css
There's a demo where you can test the form elements and see how they look like in ios. There are multiple webkit oriented properties.
有一个演示，您可以在其中测试表单元素并查看它们在 ios 中的外观。有多个面向 webkit 的属性。
回答by Waqar Alamgir
This is the what I use in my projects
这是我在我的项目中使用的
* {
-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;
}
回答by Dirk
You also get this problem in some browsers if you have the following:
如果您有以下情况，您也会在某些浏览器中遇到此问题：
<a class="btn btn-primary" href="#" type="button">Link</a>
instead of:
代替：
<a class="btn btn-primary" href="#" role="button">Link</a>
This can happen if you change your input element for an anker element and forget to change typeto role.
如果您将输入元素更改为 anker 元素而忘记更改type为role.
I had this problem on both Chrome and Safari on my IPad.
我在 iPad 上的 Chrome 和 Safari 上都遇到了这个问题。
