custom-select

custom-select.njk

<div class="custom-select active">
  <div class="custom-select__title">Санкт-Петербург</div>
  <div class="custom-select__content">
    <input id="singleSelect0" type="radio" name="city" value="spb" checked />
    <label for="singleSelect0" class="custom-select__label">Санкт-Петербург</label>
    <input id="singleSelect1" type="radio" name="city" value="moscow" />
    <label for="singleSelect1" class="custom-select__label">Москва</label>
    <input id="singleSelect2" type="radio" name="city" value="vasuki" />
    <label for="singleSelect2" class="custom-select__label">Новые Васюки</label>
    <input id="singleSelect3" type="radio" name="city" value="samara" />
    <label for="singleSelect3" class="custom-select__label">Самара</label>
  </div>
</div>

{#
export default () => {
  
  const cities = {
    spb: 'Санкт-Петербург',
    moscow: 'Москва',
    arh: 'Архангельск',
    krasnodar: 'Краснодар',
    volgograd: 'Волгоград',
    sochi: 'Сочи',
  };

  const searchContainer = document.querySelector('.custom-select__content');
  const searchTitle = document.querySelector('.custom-select__title');

  const init = (data) => {
    let html = '';
    let count = 0;
    const arr = Object.keys(data);
    for (let i = 0; i < arr.length; i++) {
      const city = arr[i];
      const checked = i === 0 ? 'checked' : '';
      count++;
      html += `
    <input id="city-${count}" type="radio" name="city" value="${city}" ${checked}/>
    <label for="city-${count}" class="custom-select__label">${data[city]}</label>
    `;
    }
    searchContainer.innerHTML = html;

    searchContainer.addEventListener('change', ({target}) => {
      searchTitle.innerText = data[target.value];
    });
  };

  init(cities);
};
#}

{#
.custom-select {
position: relative;
display: inline-flex;
min-width: 50px;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;

&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 56px);
height: 1px;
background-color: cadetblue;
z-index: 2;
}

&.active {
.custom-select__title {
&::before {
transform: translate(-5px, -50%) rotate(-45deg);
}

&::after {
transform: translate(5px, -50%) rotate(45deg);
}
}

label {
max-height: 40px;
visibility: visible;
}

.custom-select__content {
opacity: 1;
transform: translate3d(0, 30px, 0);
pointer-events: auto;
}
}
}

.custom-select__title {
position: relative;
width: 100%;
padding-right: 56px;
font-weight: 600;
font-size: inherit;
background-color: white;
color: cadetblue;
line-height: 1;
z-index: 2;

&::before,
&::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 15px;
height: 3px;
transition: transform .3s ease-out;
background-color: cadetblue;
transform: translate(-5px, -50%) rotate(45deg);
}

&::after {
transform: translate(5px, -50%) rotate(-45deg);
}

&:hover {
border-color: peru;

&::before,
&::after {
background-color: peru;
}
}
}

.custom-select__content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
min-width: 200px;
display: flex;
flex-direction: column;
padding: 17px 0;
margin: 0;
border: none;
background-color: white;
box-shadow: 0 4px 10px rgba(101, 101, 101, .25);
opacity: 0;
transition: transform $duration-default, opacity .15s;
z-index: 1;
pointer-events: none;

input {
&:checked + label {
color: black;
background-color: gray;
}

&:disabled + label {
opacity: .6;
pointer-events: none;
}
}

label {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-height: 0;
padding: 12px 16px;
font-size: 18px;
line-height: 1;
letter-spacing: .04em;
color: gray;
transition: max-height .3s, visibility .3s;
cursor: pointer;
overflow: hidden;
visibility: hidden;

&:hover {
color: #D8093A;
}
}
}
#}