<div id="wrap">

	<!-- section -->
	<div class="section">
		<div class="section__center">
			<div class="section__contents">

					<div class="select-box">
						<div class="select-box__select">
							<select name="my-select">
								<option disabled selected>Выберите тип доставки</option>
								<option value="1" data-price="0">Самовывоз</option>
								<option value="2" data-price="20">Курьер</option>
								<option value="3" data-price="80">Почта</option>
							</select>
							<div class="caret"></div>
						</div>

						<div class="select-box__description">
							<span class="description description--text">Стоимость доставки:</span>
							<span class="description description--value"></span>
						</div>
					</div>

			</div>
		</div>
	</div>
	<!--/section -->

</div>	
html,
body {
	cursor: default;
	font-size: 18px;
	font-family: monospace;
	background-color: #fff;
	color: #333;
}

* {
	box-sizing: border-box;
	outline: none;
}

#wrap {
	width: 100%;
	position: relative;
}

.section {
	padding: 60px 0;
	position: relative;

	&__center {
		width: 100%;
		max-width: 1024px;
		margin: 0 auto;
	}

	&__contents {
		width: 100%;
		height: 100%;
		padding: 0 20px;
	}
}

.select-box {
	display: flex;
	align-items: center;

	&__select {
		position: relative;
		flex: 0 0 auto;
		width: 300px;
		margin-right: 10px;

		select {
			display: block;
			width: 100%;
			border: 0;
			appearance: none;
			-webkit-appearance: none;
			background-color: #fff;
			box-shadow: 0 0 0 1px #000;
			padding: 10px;
			font-family: inherit;
			font-size: inherit;
			border-radius: 4px;
			transition: box-shadow .2s ease;
			
			&:hover {
				& ~ .caret {
					&::before {
						border-right-color: #6038e5;
						border-bottom-color: #6038e5;
					}
				}
			}
			
			&:focus {
				box-shadow: 0 0 0 1px #6038e5;
				
				& ~ .caret {					
					&::before {
						border-right-color: #6038e5;
						border-bottom-color: #6038e5;
						transform: rotate(45deg);
					}
				}
			}
		}
	}

	&__description {
		flex: 1 1 100%;
	}
}

.caret {
	width: 6px;
	height: 6px;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 12px;
	bottom: 0;
	margin: auto;
	pointer-events: none;

	&::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 6px;
		height: 6px;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		transform: rotate(-45deg);
		transition: .2s ease;
		transition-property: transform, border-color;
	}
}

.description {
	line-height: 1.4;

	&--text {
		margin-right: 5px;
	}

	&--value {
		font-weight: 700;
	}
}
View Compiled
$(function () {
	$('.select-box').each(function () {
		var $selectBox = $(this),
			$select = $selectBox.find('select'),
			$descValue = $selectBox.find('.description--value');

		$select.on('change', function () {
			var $selectedOption = $select.find('option:selected'),
				selectedOptionDataPrice = $selectedOption.data('price');
			
			$descValue.text(selectedOptionDataPrice);
		});
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js