1

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

Пример

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

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

2
  • Перезалейте картинку, у вас там орфографическая ошибка Commented 9 янв. 2018 в 11:31
  • Возможный дубликат вопроса: Стилизация <select> и <option>
    – SVE
    Commented 9 янв. 2018 в 17:09

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
    Commented 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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