在Chrome中的选择输入上使用框阴影

Question

我目前正在开发一个小网站，并且我已经对网站上的各种元素使用了盒子阴影效果。除了select和input之外，它似乎适用于Chrome和Firefox中已应用的所有元素。它适用于Firefox中的这些输入类型，但不适用于Chrome。有什么想法吗？

我已使用box-shadow，-webkit-box-shadow和-moz-box-shadow应用此效果，以支持多种浏览器。

Answer 1

这是一个/解决方案：

select {-webkit-appearance: none; appearance: none; }

这允许任何影子CSS应用于Chrome中的SELECT项目 - 但删除任何其他详细信息，例如下拉箭头。但只需创建一个小背景img（使用屏幕抓取）来恢复它。

您可以将此CSS包装在CSS过滤器中以仅定位Chrome：例如

@media screen and (-webkit-min-device-pixel-ratio:0) {/* older safari and older chrome */
  select {-webkit-appearance: none; appearance: none; 
}

如果在没有给定宽度的情况下使用SELECTS，请添加“padding-right”CSS以考虑新的背景图标/ img。这对我来说非常有用。

当在一个图像中将图标与下拉箭头组合时，这也适用于HTML5验证图标等。）

Answer 2

这是一种解决方法：

HTML：

<div><input type="text" /></div>

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;
}

演示：http://jsfiddle.net/AlienWebguy/UD2QP/

Answer 3

这是Chrome中的一个缺陷，您应该考虑避免添加其他代码的变通方法。如果你可以等待修复;等待它。

http://code.google.com/p/chromium/issues/detail?id=96192

该缺陷已被记录，并在撰写本文时被“转让”。

Answer 4

我刚才做的一件事就是实现一个薄的，模糊的轮廓阴影来匹配我的其他输入控件（使用box-shadow:0 0 2px #000）是这样的：

select { border:1px solid rgba(0,0,0,.2); }

导致：

对于较厚或偏移的阴影不会如此舒适，但为此目的整洁，并且不需要嵌套在其他元素中或剥离并恢复元素的所有其他样式。

Answer 5

使用它100％工作

-webkit-appearance: none; appearance: none;

如果在safari中有高度问题，那么添加

 line-height:18px;