Ввести горизонтальную прокрутку в выпадающем списке?

Question

У меня есть выпадающий список выбора, который может содержать длинное значение данных. Я хочу ввести горизонтальную прокрутку в поле выбора, и я не уверен, возможно ли это или нет. В любом случае, я мог бы ввести горизонтальную прокрутку для элементов опций. Я хочу сделать ширину элемента option такой же, как в окне выбора.

<select >
  <option > [TESTLONGDATA]</option>
  <option value="ShorttData">ShorttData</option>
  <option value="Long Data">Long Data</option>
  <option value="Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data ">Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data </option>
</select>

http://i.stack.imgur.com/lbfFL.png

Answer 1

Вы можете поместить класс или идентификатор в выборку и добавить css класс или идентификатор.

<select class="selectOption">
  <option > [TESTLONGDATA]</option>
  <option > [TESTLONGDATA]</option>
<select >

И поместить класс css:

.selectOption { width:150px;} //Or width you want
.selectOption option { width:150px; } //Or width you want

Надеюсь, что это может спасибо, спасибо!

Answer 2

       <select style="overflow:auto;max-width:50px;" >
          <option value="option1" > [TESTLONGDATA]</option>
            <option value="ShorttData">ShorttData</option>
           <option value="Long Data">Long Data</option>
           <option value="Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data ">Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data                           </option>
      </select>

Надеюсь, что приведенный выше код является полезным для вас.

Вы можете увеличить ширину, увеличив максимальную ширину