Jquery: combo box with background

Question

I prepared 2 images to show my problem but this website does not allow to post images without reputation.

I spent many hours trying to find a simple jquery based solution how to create a combo box with background image. I don't need background images for each <option> , just for combobox itself (first option).

Can not find anything simple (without ~20-30 KB of code). The example above is from one website. I checked css, js files and tried to create the same for my website but ir works only partially and it does not display selected text.

I want this: link1 but the result is: link2

Any ideas?

css

.select2 {
    opacity:0;
    filter:alpha(opacity=0);
    zoom: 1;
}
.select2d {
    background: #fff url('/w18.png') no-repeat center;
    border:1px solid #c4c4c4;
    height: 22px;
    position: relative;
    width: 160px;
}

script

$('.select2d').change(function () {
    $('#wall_a').attr('action', $(this).find('select').val());
});

html

<form id="wall_a" name="wall_a">
    <div class="select2d">
        <select id="what" class="select2">
            <option value="0">Art</option>
            <option value="1">Artist</option>
            <option value="2">Collection</option>
        </select>
    </div>
</form>

Answer 1

Check this FIDDLE

Based on the image you gave..i hope its the same what you were looking for...

The css you need to add,

.select2d {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url("http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg") no-repeat right #ddd;
   border: 1px solid #ccc;
   }

.select2d select {
   background: transparent;
   width: 200px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

Thanks.