Как в поле input вставить выпадающий список

выпадающие списки в инпуты не вставляются. Юзайте либо селект, либо гуглите jQuery AutoComplete.

или <select>

<option>1</option>

<option>2</option>

<option>4</option>

</select>

либо чет на javascript реализованное) с действием на click

datalist

но кроссбраузерность пока слабовата

не трудно руками соорудить то, что генерят все эти монструозные плагины:

- рисуем два поля: селект с нужными опшонс и инпут

- инпут висит над селектом, перекрывая визуально + кидаем event.stopPropagation

- по onclick на поле ввода инпута эмулируем раскрытие выпадающего списка селекта

- по onclick на опшонс эмулируем заполнение инпута

- по любому onclick при открытом выпадающем списке закрываем его

всё. итого: два HTML поля, CSS на 3+ строки и скрипт на 20+ строк...

А можно в виде кода?

Нашел такой вариант реализации:

   <label>Количество взрослых:</label>

   <div class="input" id="cor5">

   <input value="" id="posAdult" name="description" type="text" />

   <script type="text/javascript">

    var input = document.getElementById('posAdult'),

        parent = input.parentNode,

        select = document.createElement('SELECT');

	

    select.id = input.id;

    select.name = input.name;

    select.options.add(new Option(''));	

    select.options.add(new Option('1'));

    select.options.add(new Option('2'));

    select.options.add(new Option('3'));

	select.options.add(new Option('4'));

	

    parent.insertBefore(select, input);

    parent.removeChild(input);

</script>

</div>

Но есть одно но. Он как-то ублюдочно смотрится:

Может как-то в css можно поправить?

Задачу решил ☝ прописав в css

.sidebarForm select {

    border-top-width: 0px;

    border-bottom-width: 0px;

    border-left-width: 0px;

    border-right-width: 0px;

    width:100%;

}

Спасибо всем принимавшим участие в решении вопроса.