fl4shK,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.select__item--header.language {
width: 105px;
}
.select__box--header {
display: flex;
width: 100%;
flex-direction: column;
position: relative;
}
.select__box--header .options__container--header {
background-color: #fff;
color: #6d2568;
border: 1px solid #ccc;
max-height: 0;
width: inherit;
border: 1px solid #999;
opacity: 0;
border-radius: 10px;
overflow: hidden;
transition: all .3s;
order: 1;
position: absolute;
top: 55px;
z-index: 100;
}
.selected--header {
background-color: #f2f2f2;
border-radius: 22px;
font-family: 'Lato', sans-serif;
height: 44px;
color: #6d2568;
order: 0;
position: relative;
cursor: pointer;
transition: all .4s;
line-height: 44px;
}
.selected--header::after {
content: '';
display: block;
background: url('../img/icons/arrow/arrowsvg.svg');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
width: 9px;
height: 5px;
top: 21px;
right: 15px;
transition: all .4s;
}
.selected--header:hover {
background-color: #6d2568;
color: #fff;
}
.selected--header:hover::after {
background: url('../img/icons/arrow/arrowsvg-h.svg');
}
.selected--header.lang::before {
content: '';
display: block;
background: url('../img/icons/icons/01.svg');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 16px;
position: absolute;
left: 18px;
top: 15px;
transition: background .3s linear;
}
.selected--header.lang:hover::before {
background: url('../img/icons/icons/01-h.svg');
}
.select__box--header.active .options__container--header {
max-height: 400px;
opacity: 1;
}
.select__box--header.active .options__container--header + .selected--header::after {
transform: rotateX(180deg);
}
.select__box--header .option--header, .selected--header {
padding: 8px 36px 8px 50px;
}
.select__box--header .option--header:hover {
background-color: #6e2669;
color: #fff;
}
.select__box--header .option {
cursor: pointer;
}
.select__box--header .option input {
display: none;
}
:checked + label{
font-weight: bold;
}
</style>
</head>
<body>
<div class="select__box--header">
<div class="options__container--header options__container">
<div class="option--header option">
<input name="lang" type="radio" value="EN"><label>EN</label>
</div>
<div class="option--header option">
<input name="lang" type="radio" value="ES"><label>ES</label>
</div>
<div class="option--header option">
<input name="lang" type="radio" value="RU" checked="checked"><label>RU</label>
</div>
</div>
<div class="selected--header lang selected">RU</div>
</div>
<script>
const boxAll = document.querySelectorAll(".select__box--header");
boxAll.forEach(box => {
box.addEventListener("click", ({target}) => {
box.classList.toggle("active");
if(target = target.querySelector("input")) {
target.checked = true;
box.querySelector(".selected").innerHTML = target.value;
}
});
})
</script>
</body>
</html>