Со стандартным <select>
сделать этот никак нельзя. Стандартный <select>
кастомизируется очень плохо. Несколько первых запросов гугла дают это ясно понять: тут и хабр. Особенно это касается оформления <option>
.
Если вы хотите сделать красивейший <select>
, а тем более с раскрытием вверх, то вам придётся писать свой select
. Например, я использую блоки <div>
и <input type="hidden">
+ js
в своих селектах. На хабре есть статья (ссылка выше), где автор использует <label> + <div> + <input>
.
Пример моего селекта с раскрытием вверх (может кто напишет лучше, а мой код, по его мнению, плохой, тогда милости прошу написать свой ответ):
Содержимое HTML:
<div class="select">
<input type="hidden" name="item" value="1">
<div class="selected">Arabian</div>
<div class="option-list">
<div class="option" data-select-val="0">All cuisines</div>
<div class="option" data-select-val="1">Arabian</div>
<div class="option" data-select-val="2">Asian</div>
<div class="option" data-select-val="3">Bagels</div>
</div>
</div>
А вот 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();
, потому что оптионы могут для красоты содержать картинки и тд (например у меня именно так и есть - выбор языков с иконкой языка:
<div class="option" data-select-val="ru">
<div class="ico-lng ico-lng-ru"></div>Русский
</div>
Вроде всё. Если что - спрашивайте.