1

Подскажите, как оформить <select> так:

Пример

То есть:
1. Как добавить изменяющийся элемент при нажатии ( стрелочку и кружочек, при выборе элемента из списка)?
2. Как увеличить расстояние между <option>?

Спасибо большое за помощь!

2

2 ответа 2

3

Как-то так, дальше играйтесь со стилями сами

$('.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>

1
  • Спасибо за помощь!)
    – Lyavontiy
    9 янв 2018 в 11:15
1

Для стилизации только кнопки, можно обойтись без 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.