Что бы список раскрывался вверх (select, option)

Подскажите, как сделать чтобы раскрывающийся список раскрывался вверх?
All cuisines Arabian Asian Bagels

Ответ

Со стандартным сделать этот никак нельзя. Стандартный кастомизируется очень плохо. Несколько первых запросов гугла дают это ясно понять: тут и хабр. Особенно это касается оформления
Если вы хотите сделать красивейший , а тем более с раскрытием вверх, то вам придётся писать свой select. Например, я использую блоки

и

+ js в своих селектах. На хабре есть статья (ссылка выше), где автор использует +

+
Пример моего селекта с раскрытием вверх (может кто напишет лучше, а мой код, по его мнению, плохой, тогда милости прошу написать свой ответ):
Содержимое HTML:

Arabian

All cuisines

Arabian

Asian

Bagels

А вот JS-код:
$(function(){ $('.selected').click(function(){ $('.option-list').slideToggle(200); $('.select').toggleClass('select-active'); }); $('.option').click(function(){ select_val = $(this).attr('data-select-val'); select_div = $(this).parent().parent(); $(select_div).children('.selected').html($(this).html()); $(select_div).children('input').val(select_val);
$('.option-list').slideToggle(200); $('.select').toggleClass('select-active'); }); });
CSS-код не менее важен:
.select{ position: relative;
width: 300px; height: 25px; border: 1px solid #000; } .selected{ width: 100%; height: 100%; cursor: pointer; } .option-list{ display: none; position: absolute; bottom: 100%; left: -1px;
width: 100%; border: 1px solid red; background: rgba(255,255,255,0.5); z-index: 2; } .option{ width: 100%; height: 25px; cursor: pointer; } .option:hover{ background: #fff; }
Я сделал готовый пример на jsfiddle
По умолчанию input и .selected содержат ваше дефолтное значение селекта. Я использую $('.selected').html(), а не $('.selected').text();, потому что оптионы могут для красоты содержать картинки и тд (например у меня именно так и есть - выбор языков с иконкой языка:

Русский

Вроде всё. Если что - спрашивайте.