Поле выбора в одну строку со стрелками вверх / вниз, как в окне выбора в несколько строк

Question

В основном, я хочу это:

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

Но вместо двух строк я хочу, чтобы это было в одной строке. Можно ли это сделать без Javascript?

Если нет, я бы предположил, что достаточно распространено (хотя я не могу найти никаких соответствующих ссылок в Google), что для этого существует стандартное кросс-браузерное решение, которое было бы полезно.

РЕДАКТИРОВАТЬ: элемент управления также называется шаговый или счетчик (эта ссылка также содержит рекомендации по использованию пользовательского интерфейса при использовании управления вращением)

Решение 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>, по умолчанию отображается раскрывающийся список. Изменение этого параметра идет вразрез с ожиданиями пользователя и может усложнить использование вашей формы, в конечном итоге сократив заполнение или, по крайней мере, увеличив время, затрачиваемое на ее использование.

Если вы в конечном итоге захотите разрешить множественный выбор, то однострочный ввод будет практически невозможен.

Если у вас нет законных отзывов о том, что раскрывающиеся списки пользователей ведут себя по-разному, возможно, вы движетесь в неправильном направлении, по крайней мере с точки зрения UX.

Answer 2

Если вы можете использовать JavaScript, похоже, есть некоторые опции для управления вращением . Один из таких элементов управления имеет довольно хороший интерфейс и функциональность. Пример:

_{(источник: 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>

Кстати, я согласен с Марком