Подскажите, как оформить <select>
так:
То есть:
1. Как добавить изменяющийся элемент при нажатии ( стрелочку и кружочек, при выборе элемента из списка)?
2. Как увеличить расстояние между <option>
?
Спасибо большое за помощь!
Подскажите, как оформить <select>
так:
То есть:
1. Как добавить изменяющийся элемент при нажатии ( стрелочку и кружочек, при выборе элемента из списка)?
2. Как увеличить расстояние между <option>
?
Спасибо большое за помощь!
Как-то так, дальше играйтесь со стилями сами
$('.select').each(function() {
var $this = $(this),
selectOption = $this.find('option'),
selectOptionLength = selectOption.length,
selectedOption = selectOption.filter(':selected'),
dur = 500;
$this.hide();
$this.wrap('<div class="select"></div>');
$('<div>', {
class: 'select__gap',
text: 'Выберите'
}).insertAfter($this);
var selectGap = $this.next('.select__gap'),
caret = selectGap.find('.caret');
$('<ul>', {
class: 'select__list'
}).insertAfter(selectGap);
var selectList = selectGap.next('.select__list');
// Add li - option items
for (var i = 0; i < selectOptionLength; i++) {
$('<li>', {
class: 'select__item',
html: $('<span>', {
text: selectOption.eq(i).text()
})
})
.attr('data-value', selectOption.eq(i).val())
.appendTo(selectList);
}
var selectItem = selectList.find('li');
selectList.slideUp(0);
selectGap.on('click', function() {
if (!$(this).hasClass('on')) {
$(this).addClass('on');
selectList.slideDown(dur);
selectItem.on('click', function() {
var chooseItem = $(this).data('value');
$('select').val(chooseItem).attr('selected', 'selected');
selectGap.text($(this).find('span').text());
selectList.slideUp(dur);
selectGap.removeClass('on');
});
} else {
$(this).removeClass('on');
selectList.slideUp(dur);
}
});
});
*,
*:before,
*:after{
box-sizing: border-box;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.select {
display: inline-block;
vertical-align: top;
max-width: 245px;
width: 100%;
}
.select-wrap {
max-width: 700px;
width: 100%;
margin: 20px auto;
}
.select-wrap select {
margin: 20px;
}
.select__gap {
background: transparent;
color: #467797;
border: 1px solid #467797;
text-transform: uppercase;
font-size: 15px;
padding: 10px 15px;
cursor: pointer;
position: relative;
}
.on.select__gap,
.select__gap:hover {
color: #467797;
}
.select__list {
background: transparent;
border: 1px solid #467797;
margin: 0px 0;
}
.select__list.on {
display: block;
}
.select__item span {
display: block;
padding: 10px 15px;
cursor: pointer;
color: #333;
}
.select__item.selected,
.select__item span:hover {
color: #467797;
}
.select__gap:after {
content: '';
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 15px;
top: 50%;
margin-top: -7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 14px solid #000;
-webkit-transition: all .27s ease-in-out;
-o-transition: all .27s ease-in-out;
transition: all .27s ease-in-out;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.on.select__gap:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select-box" id="selectId" class="select">
<option value="item-1" name="value">Элемент 1</option>
<option value="item-2" name="value">Элемент 2</option>
</select>
Для стилизации только кнопки, можно обойтись без JS.
Список option
на разных устройствах будет отличаться (на iPhone - барабан, на Android - popup со списком, на desktop - выпадающий список), поэтому его лучше не трогать.
.select-button {
position: relative;
display: inline-block;
box-sizing: border-box;
display: inline-block;
}
.select-button_stretched {
width: 100%;
}
.select-button__select {
position: absolute;
top: 0;
left: 0;
bottom: 0;
rigth: 0;
width: 100%;
height: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 0;
z-index: 2;
}
.select-button__button {
z-index: 1;
}
.select-button:hover .select-button__button {
color: #fff;
border-color: #348de8;
background-color: #348de8;
}
.select-button__select:focus + .select-button__button {
border-color: #0c59a7;
}
.button {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
height: 34px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 15px;
border: 1px solid #cbd1d4;
margin: 0;
font-size: 14px;
font-family: inherit;
line-height: 32px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
border-radius: 0;
-webkit-transition-property: background-color,color,-webkit-box-shadow;
transition-property: background-color,color,box-shadow;
background-color: transparent;
color: #fff;
border-color: #509deb;
background-color: #509deb;
text-align: center;
}
.button:hover {
color: #fff;
border-color: #348de8;
background-color: #348de8;
}
.button:active {
color: #fff;
background-color: #1a7de2;
}
.example {
width: 400px;
}
.example2 {
margin-top: 30px;
width: 100%;
}
<div class=example>
<div class='select-button'>
<select class='select-button__select'>
<option>Выберите вариант</option>
<option value='1'>Москва</option>
<option value='2'>Санкт-Петербург</option>
<option value='3'>Малые Холуницы</option>
</select>
<button tabindex="-1" class='select-button__button button'>
Добавить город
</button>
</div>
</div>
<div class=example2>
<div class='select-button select-button_stretched'>
<select class='select-button__select'>
<option>Выберите вариант</option>
<option value='1'>Москва</option>
<option value='2'>Санкт-Петербург</option>
<option value='3'>Малые Холуницы</option>
</select>
<button tabindex="-1" class='select-button__button button'>
Добавить город
</button>
</div>
</div>