Custom Selectbox

This is simple SELECTBOX that converts your default <select> tag with image you want.

by Kushal Jayswal

HTML

<div class="selectbox">
    <select>
        <option>choose preset...</option>
        <option>two</option>
        <option>something</option>
        <option>4</option>
        <option>5</option>
    </select>
    <div class="out">XCZXCzxcxz</div>
</div>

<div class="selectbox">
    <select>
        <option>choose preset...</option>
        <option>two</option>
        <option>something</option>
        <option>4</option>
        <option>5</option>
    </select>
    <div class="out">XCZXCzxcxz</div>
</div>

CSS

.selectbox {
    background: url("http://i48.tinypic.com/2u7rpec.png") no-repeat scroll 99% 0;
    width: 220px;
    border: 2px solid #D1D1D1;
    border-radius: 5px 5px 5px 5px;
    float: left;
    height: 29px;
    margin-right: 15px;
}
.selectbox div {
    border-right: 2px solid #CCCCCC;
    cursor: pointer;
    height: 29px;
    overflow: hidden;
    padding: 1px 0 0 5px;
    width: 180px;
    z-index: -1;
}
.selectbox select {
    margin-top: 0;
    height: 31px;
    position: absolute;
    width: 220px;
    z-index: 2;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
    $("select").change(function () {
        var str = "";
        str = $(this).find(":selected").text();
        $(this).next(".out").text(str);
    }).trigger('change');
})