How to style <select> elements?

How can I completely change the design of a <select> element? For开发者_StackOverflow社区 example, this is how I want my dropdown to look:

Is there a way to do it with CSS? If not, jQuery?

CSS will only help you in certain browsers - for instance, Internet Explorer will ignore it for SELECTs completely

you can, however, still use an ordinary select on page without any CSS whatsoever and then use a jQuery plugin that degrades gracefully (so when people don't have JS enabled, they will still see that original select box)

one of such plugins is this great jQuery UI selectmenu from Filament Group

however, as pointed out by clonked in comments - use at least some browser sniffing to check whether people are not accessing that menu from iPhone or similar devices, as they might have problems accessing that JS select box

if you're by any chance using PHP on the server side, here's a nice browser sniffing library for you: http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

You will have issues achieving consistent styling of a <select> element with CSS alone. Your best bet is to use jquery. Fortunately a very nice plugin has already been created:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

There are several jQuery plugins that will help you accomplish this.

Here is a light-weight one: http://www.adamcoulombe.info/lab/jquery/select-box/

And here is a tutorial to build one from scratch with images: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

You can try the following way. Where selectBg.png is 1px background image. It will give an output like following image:

CSS Code:

select.onlyOne {
    background: url("./theme/default/images/selectBg.png") repeat scroll 0 0 transparent;
    border: 0 none;
    color: #747862;
    font-size: 12px;
    font-weight: bold;
    height: 40px;
    margin-bottom: 0;
    padding: 8px 4px 8px 0;
    width: 430px;
}

HTML Code:

<select class="onlyOne" name="somename">
   <option value="somevalue">somevalue</option>
   <option value="somevalue">somevalue</option>
</select>

We can able to design select tag using jquery coding, Check the coding below

(document).ready(function() {
$('#btn-add').click(function(){
    $('#select-from option:selected').each( function() {
            $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-remove').click(function(){
    $('#select-to option:selected').each( function() {
        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-up').bind('click', function() {
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) - 1;
        if (newPos > -1) {
            $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});
$('#btn-down').bind('click', function() {
    var countOptions = $('#select-to option').size();
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) + 1;
        if (newPos < countOptions) {
            $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});

}); and the html code is

</select>
<a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
<a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>
<select name="selectto" id="select-to" multiple size="5">
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
  <option value="7">Item 7</option>
</select>

it's impossible!

the style is simulated by other html tags and css!