带有向上/向下箭头的单行选择框，如多行选择框中所示

Question

基本上，我想要这个：

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

但我没有两条线，而是想要一条线。这可以在没有Javascript的情况下完成吗？

如果没有，我会想象它已经足够普遍（虽然我在Google上找不到任何相关链接）存在标准的跨浏览器解决方案，这将有所帮助。

编辑：该控件也称为stepper或spinner（此链接还包含有关何时使用旋转控件的UI指南）

解决方案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>

此解决方案依赖于以下事实：选择框足够大以启用控件，但文本足够大，因此只显示一行文本。问题在于它需要相当大才能工作。它适用于IE / FF但由于浏览器默认文本大小不一致而仍然不稳定。

Answer 1

在努力寻找可行的无JavaScript解决方案之前，您可能需要重新考虑用户交互方面。

当向用户显示单行<select>时，默认行为是显示下拉列表。改变这种情况会违背用户的期望，并可能使您的表单更难使用，最终减少完成时间或至少增加使用它的时间。

如果您最终想要允许多项选择，那么几乎不可能使用单行输入。

除非您有合理的反馈意见，用户希望下拉列表的行为方式不同，否则您可能会走错方向，至少从用户体验的角度来看。

Answer 2

如果您可以使用JavaScript，则看起来有some options for spinner controls。 One such control具有相当不错的用户界面和功能。例如：

_{（来源：extjs.com）}

Answer 3

试试这个。

<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我同意马克