CSS 在 Chrome 中的选择输入上使用框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7300755/
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
Using box shadow on select inputs in Chrome
提问by Hindle
I am currently working on a small site, and I have used the box-shadow effect on various elements on the site. It seems to work on all the elements where it has been applied, in both Chrome and Firefox, except for selectand input. It will work fine for these input types in Firefox but not in Chrome. Any ideas why?
我目前在一个小网站上工作，我在网站上的各种元素上使用了框阴影效果。它似乎适用于应用它的所有元素，在 Chrome 和 Firefox 中，除了select和input。它适用于 Firefox 中的这些输入类型，但不适用于 Chrome。任何想法为什么？
I have applied this effect using box-shadow, -webkit-box-shadowand -moz-box-shadowfor multiple browser support.
我已经使用box-shadow,应用了这种效果，-webkit-box-shadow并-moz-box-shadow支持多个浏览器。
采纳答案by AlienWebguy
Here's a workaround:
这是一个解决方法：
HTML:
HTML：
<div><input type="text" /></div>
CSS:
CSS：
div {
-webkit-box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
box-shadow: 5px 5px 5px #666;
display:inline-block;
}
回答by Darren
Here's a/the solution:
这是一个/解决方案：
select {-webkit-appearance: none; appearance: none; }
This allows any shadow CSS to apply to SELECT items in Chrome - but removes any other details such as the drop-down arrow. But simply create a small background img (using screen grab) to reinstate this.
这允许任何阴影 CSS 应用于 Chrome 中的 SELECT 项目 - 但删除任何其他细节，例如下拉箭头。但只需创建一个小的背景 img（使用屏幕抓取）来恢复它。
You could wrap this CSS in CSS filters to target only Chrome: E.g.
您可以将此 CSS 包装在 CSS 过滤器中以仅针对 Chrome：例如
@media screen and (-webkit-min-device-pixel-ratio:0) {/* older safari and older chrome */
select {-webkit-appearance: none; appearance: none;
}
If using SELECTS without a given width, add 'padding-right' CSS to account for the new background icon/img. This has worked perfectly for me.
如果在没有给定宽度的情况下使用 SELECTS，请添加 'padding-right' CSS 以说明新的背景图标/img。这对我来说非常有效。
This also works for HTML5 validation icons, etc, when combining an icon with drop-down arrow in one image).
这也适用于 HTML5 验证图标等，当在一个图像中组合带有下拉箭头的图标时）。
回答by Seth
This is a defect in Chrome, and you should consider avoiding workarounds that add additional code. If you can wait for the fix; wait for it.
这是 Chrome 中的一个缺陷，您应该考虑避免添加额外代码的变通方法。如果你可以等待修复；等待它。
http://code.google.com/p/chromium/issues/detail?id=96192
http://code.google.com/p/chromium/issues/detail?id=96192
The defect has been recorded and was "assigned" at the time of this writing.
在撰写本文时，该缺陷已被记录并“分配”。
回答by Grant Thomas
One thing I've just done to achieve a thin, faint, outline-like shadow to match my other input controls (which use box-shadow:0 0 2px #000) is this:
为了与我的其他输入控件（使用box-shadow:0 0 2px #000）相匹配，我刚刚完成的一件事是实现一个薄的、微弱的、类似轮廓的阴影是这样的：
select { border:1px solid rgba(0,0,0,.2); }
Resulting in this:
结果是这样：
Won't work so comfortably for thicker or offset shadows but neat for this purpose, and doesn't require nesting in other elements or stripping and reinstating all other styles of the element.
对于较厚或偏移的阴影来说不会那么舒服，但为此目的很整洁，并且不需要嵌套在其他元素中或剥离和恢复元素的所有其他样式。
回答by ayub majeed
use it works 100%
使用它工作 100%
-webkit-appearance: none; appearance: none;
if there is height problem in safari so add
如果 safari 中存在高度问题，请添加
line-height:18px;
