CODEWITHSUNDEEP
jquerycssxhtmlselectdrop-down-menu
Jared
Jared

Reputation: 2096

How to style <select> elements?

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

Screeshot

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

Upvotes: 1

Views: 14957

Answers (6)

Best website designer
Best website designer

Reputation: 129

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>

Upvotes: 0

Zathrus Writer
Zathrus Writer

Reputation: 4331

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/

Upvotes: 5

enam
enam

Reputation: 1177

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

modified select element

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>

Upvotes: 1

mVChr
mVChr

Reputation: 50167

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/

Upvotes: 2

mier
mier

Reputation: 734

it's impossible!

the style is simulated by other html tags and css!

Upvotes: -2

Nathan Anderson
Nathan Anderson

Reputation: 6878

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/

Upvotes: 2

Related Questions