How do I style a select-box with gradients?

Question

I'd like to style a select-box with some gradients. My problem is that somehow there is a shadow added. You'll see what I mean by opening this fiddle. The gradient of both classes is the same ... I do not know why a shadow is added to the select-box and I just can't find a solution. Can you help me?

Thank you.

Answer 1

The select element is handled by the underlying platform/OS, rather than the browser; as such it's not possible to style them (using Chrome 8/Win XP). If you feel the need to use styled select elements then you'll need to use a regular html element (such as an ol or ul) in combination with JavaScript.

I put together a demo of the ideas involved for another question, which shows how this might be achieved: JS Fiddle demo.

I'm not sure what you mean by the 'shadow', although typically input elements are styled with a :focus pseudo-element rule, to indicate that the element has focus. This can be amended with:

select:focus {
    outline: 0 none transparent; 
}

Although this does reduce the accessibility of the form for those navigating with keyboards/non-mouse input-devices. Ideally, it's better to define an outline that fits with your site's design.