<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);
});
});
});
This Pen doesn't use any external CSS resources.