Select List Styled With Image Overlay Not Working In Opera

We're using images in CSS to restyle our select fields and they display as required in all main browser except in Opera, where the images don't display. I've created a JSfiddle to

Solution 1:

Styling a select element is not 100% supported in all browsers.

You may want to try this jquery ui: https://github.com/fnagel/jquery-ui that let's you design your own select list element.

Solution 2:

It's not practical to style the actual select box, especially if full cross-browser support is required. The best bet is to hide the select box and create a styled imitation of it. There are two basic ways to do this, with jQuery plug-ins available for both.

Hide and fake the button

The safest way to restyle a select box (as long as IE6 support isn't required) is to give the select box an opacity of 0 (make it completely transparent) and place it on top of a div that's styled as needed (opacity only affects the button part of the select box, not the dropdown part). The user sees the styled button but all UI events are handled by the actual button. This approach works in all browsers except IE6 (which doesn't support using opacity on a select box).

For an example of this, see the demos for jQuery Uniform.

This is as far as a select box can be styled without starting to impact usability and accessibility. And the approach is simple enough for someone to implement on their own if needed, without a plug-in or without jQuery. The limitation of this approach is that very little styling of the dropdown menu is possible, though the button itself can be fully styled.

Hide and fake the entire select box

The other option is to completely hide the select box and replace both the button and the dropdown menu with a fully-styled imitation. In this case all UI events will be handled by the imitation.

For a couple examples of this, see the demos for jqTransform and UI Selectmenu.

With this approach, both the button and the dropdown menu can be fully styled, but there's a loss of usability and accessibility. It generally does not support screenreaders well, and when the user clicks on the select box on a touch device they won't get the native picker pop-up. Also, this approach is far too complicated for most people to implement without using a plug-in.