Single line select box with up/down arrows like in a multi line select box

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

Try this.

<select size="2" style="height:2em;">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
   <option>6</option>
</select>

BTW i agree with Mark

Answer 2

You may want to rethink the user interaction side of this before struggling to find a workable JavaScript-free solution.

When a user is presented with a single-line <select> the default behavior is for a dropdown list to appear. Changing this goes against the user's expectations and may make your form harder to use, ultimately reducing completion or at least increasing the time involvement to use it.

If you eventually want to allow multiple selections, then a single-line input would be almost impossible to use.

Unless you have legitimate feedback that users would like dropdown lists to behave differently, you may be heading in the wrong direction, at least from a UX perspective.