Question

Basically, I want this:

<select size='2'>   <option>1</option>   <option>2</option>   <option>3</option>   <option>4</option> </select> 

But instead of having two lines, I want it on a single line. Can this be done without Javascript?

If not, I would imagine it’s common enough (though I can’t find any relevant links on Google) that there exists a standard cross-browser solution for this which would be helpful.

EDIT: The control is also called a stepper or a spinner (this link also has UI guidelines for when to use a spin control)

Solution A:

<select size='2' style='height:40px; font-size:28px;'>   <option>1</option>   <option>2</option>   <option>3</option>   <option>4</option>   <option>5</option>   <option>6</option> </select> 

This solution relies on the fact that the select box is big enough to enable controls but the text is big enough to so that there’s only one line of text showing. The problem is that it needs to be quite big for this to work. It works on IE/FF but still precarious because of the browser default text size discrepancies.

Answer 1

If you can use JavaScript, it looks like there are some options for spinner controls. One such control has pretty good UI and functionality. Example:

_{(source: extjs.com)}