Стилизация select

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

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