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

Question

我目前正在一个小网站上工作,我已经在网站上的各种元素上使用了盒子阴影效果.它似乎适用于Chrome和Firefox中应用的所有元素,除了select和input.它适用于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;
}

Answer 3

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

该缺陷已被记录,并在撰写本文时被"分配".