Using box shadow on select inputs in Chrome

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/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.

You could wrap this CSS in CSS filters to target only Chrome: E.g.

@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.

This also works for HTML5 validation icons, etc, when combining an icon with drop-down arrow in one image).

Answer 2

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/