design of a select box - found something but need help

Question

i have found this one: http://www.prismstudio.co.uk/2009/05/jquery-plugin-stylish-select-unobstrusive-select-box-replacement/

the problem i'm having is that i have 3 gifs: 1 for the left side rounded corner. 1 for the 2 paralel lines (i don't know the length of the dynamic select box). 1 for the select arrow

how can i have that in this code? i have tried several things with it but it is not doing what i want

Answer 1

Try using a single image for the left side. Just make it far too long to run out of background. The image for the right side can overlay on top and slightly to the right of the left half.

So you will have a left background image like this:

[==================================

and a right one:

v]

and the two together will form this

[=========v]

This is all the sliding doors technique. Besically the left half slides under the right half. See http://www.alistapart.com/articles/slidingdoors/

When CSS3 is better supported you can take advantage of multiple backgrounds.

Firstly if you don't want a fixed width then remove all the widths from the css.

This is the html the plugin produces:

 <div class="newListSelected newListSelFocus" tabindex="0" style="position: relative;">
<div class="selectedTxt">250</div>
<ul style="visibility: visible; top: -528px; height: 528px; left: 0pt; display: block;" class="newList">
<li><a href="JavaScript:void(0);" class="hiLite">250</a></li>
<li><a href="JavaScript:void(0);">500</a></li>
<li><a href="JavaScript:void(0);">1000</a></li>
<li><a href="JavaScript:void(0);">1500</a></li>
<li><a href="JavaScript:void(0);">2000</a></li>
</ul></div>

Put one of the sliding doors backgrounds on .NewListSelected, and the other on .selectedTxt nad you should be good to go.

The css provided with the plugin doesn't position the select boxes very well at all. Everything is floated left for example. Use display:inline-block; to position the dropdowns inline.