Question

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 select and input. It will work fine for these input types in Firefox but not in Chrome. Any ideas why?

I have applied this effect using box-shadow, -webkit-box-shadow and -moz-box-shadow for multiple browser support.

Answer 1

Here’s a workaround:

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

Demo: http://jsfiddle.net/AlienWebguy/UD2QP/