So you're looking for an "L-shaped" drop-down box? That is, when not in use, a short box showing only the beginning of the selected text, and when you open it, the listed choices (below) are full length (while the short box stays short)? That's gonna be tricky. You can easily limit the size of the select box with CSS "width", but I don't know of any way to override that for the listed choices (i.e., it appears that they inherit the select short box's length). I suppose that you could add Javascript to change the styling (width) of the select box on mouseover or click, but that would probably rearrange your page to fit the lengthened element.

What you might end up doing is faking a select box in Javascript, to pop up a <div> with a number of choices and a scrollbar, each with their own Javascript to select/deselect. It will be complicated, but I'm sure it can be done in some manner. The hardest part will be positioning the pop-up so it's fully on page, yet adjacent to the "select" box. Have you googled for this? I can't believe that someone hasn't solved this problem before.