Previously, I am using

<select size="8">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
<option>Item 6</option>
<option>Item 7</option>
<option>Item 8</option>
<option>Item 9</option>

provide a JList box liked place, to hold a collections of item, to let user have a simple view to browse about items.

However, the look of this kind of pure HTML element doesn't look shinning.

Have anyone of you come across any similar widget/ JavaScript library/ CSS template ... which will make this List Box look great?


3 answers

o.k.w 2355

It's a known fact (at least for now) that styling a standard SELECT element is tricky business especially so if you just want to use CSS alone. Several 'hacks' involve using scripting/layering other HTM elements on top of CSS.

You might want to give some of the jQuery plugins a try as listed in these articles:

E.g.: jQuery Dropdown Check List

Answered over 9 years ago by o.k.w

I've done it previously by hiding the original select in the DOM and then creating your own stylized version with DIVs, which can look really good, but it's a hell of a lot easier nowadays to just use the plugins available for the various javascript frameworks such as those for jquery suggested above.

Answered over 9 years ago by Derek Lawrie

Here is the link to a jQuery way to style your select box. You can change the image to make it look whatever you want:

Answered over 9 years ago by adelacreative