Using box shadow on select inputs in Chrome

I am currently working on a small site, and I have used the box-shadow effect on various elements on the site. It seems开发者_C百科 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.

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/

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

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.

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

The defect has been recorded and was "assigned" at the time of this writing.

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:

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.

use it works 100%

-webkit-appearance: none; appearance: none;

if there is height problem in safari so add

 line-height:18px;