customised select dropdown

Many times you may find to give some styling to default select dropdown, as its OS control that is rendered by itself, we find it difficult to style it that looks same in all browsers and OS.

There are many Jquery plugins, that make it possible but if that customised dropdown is used in dontnet or java development, the developers face it difficult to handle it. then we revert back to default dropdown removing plugin.

To handle this, I have found one way to make the dropdown look beautiful and stylish, which is compatible by all modern browsers,

(My techinique is not compatible with IE6 :) ). 

But i have used in many projects, and clients are happy with it.

Implementaion:

The trick is we use the same normal select dropdown,but with extra divs appended with it,

making the dropdown opacity 0, and giving the styling to div, and small jquery code will make it function like the dropdown.

HTML Structure:

<div class="container">
<div class="select_bg">
    <div class="selectedvalue"> div>
    <select id="citySelect" name="number">
        <option selected="selected">Select State / Cityoption>
        <option value="1">Ahmedabadoption>
        <option value="2">Andaman and Nicobar Islandsoption>
        <option value="3">Andhra Pradeshoption>
    select>
div>
div>

Above is the html structure, that needs to followed, to make my technique work.

the developer can use repeater or use for loop to option, to fetch values from database easily. without affetcing the design. Even the events can be used, change or focus events are used gradually.

CSS code:

.container{padding:20px 0 0 25px}

 
.select_bg{background:#f0f0f0;_background:none;border:1px solid #bdbcbd;float:left;height:24px;position:relative;width:200px;padding:0 0 3px;font-size:10px;font-family:Arial}

.select_bg .selecteddropval{width:130px}

.select_bg select{-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;cursor:pointer;position:absolute;left:0px;outline:0;top:7px;}

 
.select_bg .selectedvalue{font-size:1.3em;height:24px;position:absolute;width:204px;padding:5px 0 0 12px}

Jquery Code :

$(".select_bg").each(function () {
    $(this).find("option").each(function () {
        if ($(this).attr("selected")) {
            $(this).parent().prev(".selectedvalue").html("

" + $(this).html() + "

");
        }
    });
});

$(".select_bg select").live('change', function () {
    var categoryId = $(this).children("option:selected").val();
    $(this).prev().html("

" + $(this).children("option:selected").text() + "

");
});

So its done, You can view the demo here.

This will decrease the page load, of using heavy plugins.:)