html – How do I style an option select?

.sortvibor {
  float: left;
  margin-top: 10px;
  font-family: 'PT Sans Narrow 400';
  line-height: 20px;
  position: relative;
}
.sortvibor span {
  font-size: 18px;
  color: #000;
}
.sortvibor form {
  display: inline-block;
  padding-left: 5px;
}
.sortvibor select {
  font-family: 'PT Sans Narrow 400';
  line-height: 20px;
  color: #000;
  font-size: 14px;
  min-width: 155px;
  padding: 2px 50px 2px 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background-color: transparent;
  text-decoration: underline;
  outline: none;
  border: 1px solid #467797;
}
.sortvibor option:checked {
  display: none;
}
.sortvibor option:not(:checked) {
  color: #467797;
}
.sortvibor option {
  border: 1px solid #467797;
}
.sortvibor .strelka {
  position: absolute;
  right: 10px;
  top: 4px;
  z-index: -9999;
}

<div class="sortvibor">
  <span>Сортировать:</span>
  <form action="">
    <select name="sort" id="sort">
      <option selected value="">Дешевле</option>
      <option value="">Дороже</option>
    </select>
  </form>
  <span class="strelka">&#9660;</span>
</div>

// Select
	$('.select').each(function(){
		// Variables
		var $this = $(this),
			selectOption = $this.find('option'),
			selectOptionLength = selectOption.length,
			selectedOption = selectOption.filter(':selected'),
			dur = 500;

		$this.hide();
		// Wrap all in select box
		$this.wrap('<div class="select"></div>');
		// Style box
		$('<div>',{
			class: 'select__gap',
			text: 'Please select'
		}).insertAfter($this);
		
		var selectGap = $this.next('.select__gap'),
			caret = selectGap.find('.caret');
		// Add ul list
		$('<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);
		}
		// Find all items
		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">item-1</option>
  <option value="item-2" name="value">item-2</option>
  </select>