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

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.

From stackoverflow

• 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

  Mark Hurd : I don't get see up/down arrows with this approach, even after adjusting the width.

  Zack Mulgrew : I get a spinner in IE6 with this approach. Nice.

  Zack Mulgrew : I don't get a spinner in FF3, though. :(

  sanchothefat : that would just increase the height of the select around the options and wouldn't expose any more of them.

  sanchothefat : Huh, didn't know that about IE6, pretty cool. It's not part of the w3c spec though so can't rely on it as Zack noted.

  aleemb : I came across something like this earlier, and it can be made to work in IE/FF but still not good enough.

• 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.

  aleemb : UX/UI both merit it in my case--it's for a number counter with a limited scale too large for radios but still needs to be constricted so a text field is not an option.

  Mark Hurd : What exactly is the range you need to display? I think a regular dropdown may still be more efficient for the end-user than a spinner control. Conversely, you can include instruction text stating 'only values x through y' are allowed, and validate it on the server side (since client-side JS is out.)

• 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:

  

  Zack Mulgrew : After re-reading your question I'm not sure if a spinner was what you were looking for. My bad.

  aleemb : A spinner is pretty much what I was looking (didn't know that's what it was called) though would like to have avoided JS but it seems there's no other good options.