select2

by Valeriy Brunov

HTML

<div class="select" tabindex="-1" OnClick="let mythis=this;for(let elem of this.querySelectorAll('.select__label')) {elem.onclick=function(){mythis.querySelector('.select__field').textContent=elem.textContent}}">
  <div class="select__triangle"></div>
  <div class="select__field"><span>Выбрать слово vvvv dbdbbrb brbrbrbrbrbrb</span></div>
  <div class="select__menu">
    <label for="my-test" class="select__label">
      <input type="radio" name="test" id="my-test" class="select__radio">Test_1
    </label>
    <label for="my-test2" class="select__label">
      <input type="radio" name="test" id="my-test2" class="select__radio">Test_2
    </label>
    <label for="my-test6" class="select__label">
      <input type="radio" name="test" id="my-test6" class="select__radio">Test_1
    </label>
    <label for="my-test7" class="select__label">
      <input type="radio" name="test" id="my-test7" class="select__radio">Test_2
    </label>
  </div>
</div>

<br>

<div class="select" tabindex="-1" OnClick="let mythis=this;for(let elem of this.querySelectorAll('.select__label')) {elem.onclick=function(){mythis.querySelector('.select__field').textContent=elem.textContent}}">
  <div class="select__field">Выбрать слово</div>
  <div class="select__menu">
    <label for="my-test3" class="select__label">
      <input type="radio" name="test2" id="my-test3" class="select__radio">Test_3
    </label>
    <label for="my-test4" class="select__label">
      <input type="radio" name="test2" id="my-test4" class="select__radio">Test_4
    </label>
  </div>
</div>

CSS

.select {
  position: relative;
  font-size: 14px;
}

.select:hover,
.select__label:hover {
  cursor: pointer;
}

.select:focus .select__menu {
  display: block;
}

.select__field,
.select__menu {
  border: 1px solid green;
}

.select__field span {
  color: #666;
  display: block;
  width: 90%;
  overflow: hidden;
}

.select__triangle {
  position: absolute;
  right: 0;
  top: calc((1em + 4px + 4px - 0.1em) / 2);
  margin-right: calc((1em + 4px) / 2);
  background: white;
  height: 0;
  width: 0;
  border-left: 0.38em solid transparent;
  border-right: 0.38em solid transparent;
  border-top: 0.58em solid #79849B;
  box-sizing: border-box;
}

.select__field {
  padding: 4px;
  min-height: 1em;
  box-sizing: border-box;
  white-space: nowrap;
}

.select__label {
  display: block;
}

.select__menu {
  position: absolute;
  top: calc(4px + 4px + 1em + 4px);
  left: 0;
  right: 0;
  display: none;
  padding: 4px;
  opacity: 1;
  filter: alpha(Opacity=1); /* Прозрачность в IE */
  background-color: white;
  z-index: 9999999;
  max-height: 4em;
  overflow: auto;
  box-sizing: border-box;
}

.select__radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
}