Помогите сверстать селектор выбора языка!

Question

Помогите сверстать селектор выбора языка!

Рейтинг: -2Ответов: 1Опубликовано: 12.01.2023

не могу понять как правильно сверстать вот такую штуку, помогите пожалуйста. Пробовал по разному уже, и везде упирался во что-то.

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 3

Чисто визуальная составляющая может быть реализована следующим образом:

body { background: #000; }

.lang {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  height: 60px; width: 80px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 2px 2px #fff;
}
.lang:hover { height: max-content; }

input[name="lang"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

label {
  display: grid;
  place-items: center;
  height: 60px;
}
input:checked + label { order: -1; }

<div class="lang">
  <input name="lang" type="radio" id="lang_ru" checked><label for="lang_ru"><img src="https://img.icons8.com/offices/2x/russian-federation.png" alt="Русский"></label>
  <input name="lang" type="radio" id="lang_en"><label for="lang_en"><img src="https://img.icons8.com/offices/2x/great-britain.png" alt="English"></label>
  <input name="lang" type="radio" id="lang_cn"><label for="lang_cn"><img src="https://img.icons8.com/offices/2x/china.png" alt="中国人"></label>
</div>

"The trouble of our time are ignoramuses, lazy and boors."

Помогите сверстать селектор выбора языка!

Ответы