admin管理员组

文章数量:1315829

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

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

• javascript
• html
• css
• forms

Share Improve this question Follow edited Sep 21, 2017 at 21:55 P.S. 16.4k1414 gold badges6565 silver badges8686 bronze badges asked Feb 15, 2009 at 1:28 aleembaleemb 32.1k2121 gold badges102102 silver badges114114 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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.)}

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

本文标签： javascriptSingle line select box with updown arrows like in a multi line select boxStack Overflow