CSS 移除 iOS 输入阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23211656/
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
Remove iOS input shadow
提问by WHITECOLOR
On iOS (Safari 5) I have to following for input element (top inner shadow):
在 iOS (Safari 5) 上，我必须关注输入元素（顶部内阴影）：
I want to remove top shadow, bug -webkit-appearancedoesn't save.
我想删除顶部阴影，错误-webkit-appearance不保存。
Current style is:
目前的风格是：
input {
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
回答by Mastrianni
You'll need to use -webkit-appearance: none;to override the default IOS styles. However, selecting just the inputtag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.
您需要使用-webkit-appearance: none;来覆盖默认的 IOS 样式。但是，只选择inputCSS 中的标签不会覆盖默认的 IOS 样式，因为 IOS 使用属性选择器添加它的样式input[type=text]。因此，您的 CSS 将需要使用属性选择器来覆盖已预设的默认 IOS CSS 样式。
Try this:
尝试这个：
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
Helpful Links:
有用的网址：
You can learn more about appearancehere:
您可以appearance在此处了解更多信息：
http://css-tricks.com/almanac/properties/a/appearance/
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
如果您想了解有关 CSS 属性选择器的更多信息，可以在此处找到一篇内容丰富的文章：
回答by jstnrs
background-clip: padding-box;
Seems to remove the shadows as well.
似乎也消除了阴影。
As @davidpauljuniormentioned; be careful setting -webkit-appearanceon a general input selector.
正如@davidpauljunior 所提到的；-webkit-appearance在通用输入选择器上小心设置。
回答by ShinyJos
webkit will remove all properties
webkit 将删除所有属性
-webkit-appearance: none;
Try using the property box-shadow to remove the shadow on your input element
尝试使用属性 box-shadow 去除输入元素上的阴影
box-shadow: none !important;
回答by Andreas Riedmüller
I tried to come up with a solution that a.) worksand b.) I am able to understand why it works.
我试图想出一个解决方案，a.) 有效，b.) 我能够理解它为什么有效。
I do know that the shadow for inputs (and the rounded border for input[type="search"]) comes from a background-image.
我知道输入的阴影（以及输入 [type="search"] 的圆形边框）来自背景图像。
So obviously setting background-image: nonewas my first attempt, but this does not seem work.
所以显然设置background-image: none是我的第一次尝试，但这似乎不起作用。
Setting background-image: url()works, but i am still concerned about having a empty url(). Altough it currently is just a bad feeling.
设置background-image: url()有效，但我仍然担心有一个空的url(). 虽然现在只是一种不好的感觉。
background-clip: padding-box;seems to do the job as well, but even after reading the "background-clip" docs I don't get why this completly removes the background.
background-clip: padding-box;似乎也能完成这项工作，但即使在阅读了“背景剪辑”文档之后，我也不明白为什么这会完全删除背景。
My favorite solution:
我最喜欢的解决方案：
background-image: linear-gradient(transparent, transparent);
This is valid css and I do understand how it works.
这是有效的 css，我确实了解它是如何工作的。
回答by Tom Spencer
Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose typeis "text". There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.
虽然接受的答案是一个良好的开端，正如其他人所指出的，它仅适用于输入其type是"text"。还有无数其他输入类型在 iOS 上也呈现为文本框，因此我们需要扩展此规则以考虑这些其他类型。
Here's the CSS I'm using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble <input>tag too.
这是我用来去除内部阴影的输入文本字段和文本区域的 CSS，同时保留按钮、复选框、范围滑块、日期/时间下拉列表和单选按钮的默认样式，所有这些也是使用谦虚<input>标签创作的.
textarea,
input:matches(
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]
) {
-webkit-appearance: none;
}
回答by Reado
This works better for me. Plus it means I don't have to apply it to every different type of input (i.e. text, tel, email, etc).
这对我来说效果更好。另外，这意味着我不必将其应用于每种不同类型的输入（即文本、电话、电子邮件等）。
* {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
