<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <title>Document</title>
  <link rel="stylesheet" href="/javascript-select.e31bb0bc.css"></head>
  <body>
    <div class="app">
      <div class="wrap">
        <div class="select">
          <label class="select__label">
            <input type="text" disabled="" placeholder="Введите имя">
            <i class="fa fa-chevron-down select__arrow"></i>
          </label>
          <div class="select__dropdown">
            <ul class="select__list">
              <li class="select__item">1</li>
              <li class="select__item">2</li>
              <li class="select__item">3</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">1</li>
            </ul>
          </div>
        </div>

          <div class="select">
          <label class="select__label">
            <input type="text" disabled="" placeholder="Введите имя">
            <i class="fa fa-chevron-down select__arrow"></i>
          </label>
          <div class="select__dropdown">
            <ul class="select__list">
              <li class="select__item">1</li>
              <li class="select__item">2</li>
              <li class="select__item">3</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">4</li>
              <li class="select__item">1</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <script src="/javascript-select.e31bb0bc.js"></script>
  </body>
</html>

.app {
  padding-top: 5rem;
  display: flex;
  justify-content: center;
}

.wrap {
  width: 500px;
  display:flex;
}

.select {
  width: 100%;
  position: relative;
  /* when select open add class OPEN */
}
.select.open .select__dropdown {
  display: block;
}
.select.open .select__label {
  border-bottom: none;
}
.select.open .select__arrow {
  transition: 0.3s ease;
  transform: rotate(180deg);
}
.select__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 15px;
  border: 1px solid #797979;
  border-radius: 5px;
  cursor: pointer;
}
.select__label > input {
  position: relative;
  z-index: -1;
  height: 100%;
  min-height: 100%;
  background-color: transparent;
  border: none;
  width: 100%;
  margin: 0 20px 0 0;
  cursor: pointer;
}
.select__arrow {
  transition: 0.3s ease;
  position: relative;
  z-index: -1;
}
.select__dropdown {
  display: none;
  position: absolute;
  border: 1px solid #797979;
  border-radius: 5px;
  top: 46px;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
}
.select__list {
  padding: 0;
  margin: 0;
  list-style: 0;
}
.select__item {
  padding: 1rem;
  border-bottom: 1px solid #797979;
  cursor: pointer;
}
.select__item:hover {
  background-color: #eee;
  transition: 0.3s ease;
}

/*# sourceMappingURL=/javascript-select.e31bb0bc.css.map */


 class Select {
  constructor(selector) {
    this.$select = document.querySelectorAll(selector)[0];

    this.$inputField = this.$select.querySelector("input");
    this.$label = this.$select.querySelector(".select__label");

    this.$body = document.querySelector("body");

    this.handleClick();
    this.hanldeClickWindow();
  }


  openState() {
    this.$select.classList.add("open");
  }

  closeState() {
    this.$select.classList.remove("open");
  }

  /* open/close dropdown list */
  toggleState() {
    if (this.$select.classList.contains("open")) {
      this.closeState();
    } else {
      this.openState();
    }
  }

  handleClick() {
    this.$select.addEventListener("mouseup", () => {
      this.toggleState();
      this.handleValue();
    });
  }

  /* change value of input */
  handleValue() {
    if (event.target != this.$label) {
      this.$inputField.value = event.target.innerText;
    }
  }

  hanldeClickWindow() {
    window.addEventListener("click", () => {
      if (event.target != this.$label) {
        this.closeState();
      }
    });
  }
}

const select = new Select(".select")

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.