<div class="container">
  <h1>Easy simulation select box using div</h1>
  <div class="container-wrap">
    <!-- real select -->
    <div class="real-select group">
      <h2>Real select</h2>
      <div id="select-wrap">
        <select name="" id="select">
        <option value="">$ 3,588 / year</option>
        <option value="">$ 6,500 / year</option>
        <option value="">$ 8,600 / year</option>
      </select>
        <span class="select__arrow"></span>
      </div>
    </div>
    <!-- fake select -->
    <div class="fake-select group">
      <h2>Fake select</h2>
      <div class="selected-item">
        <div class="option">
          <input type="radio" name="group" />
          <p>$<span> 3,588</span> / year</p>
        </div>
      </div>
      <div class="option-wrap">
        <div class="option">
          <input type="radio" name="group" />
          <p>$<span> 3,588 </span>/ year</p>
        </div>
        <div class="option">
          <input type="radio" name="group" />
          <p>$<span> 6,500 </span>/ year</p>
        </div>
        <div class="option">
          <input type="radio" name="group" />
          <p>$<span> 8,600 </span>/ year</p>
        </div>
      </div>
    </div>
  </div>
</div>

html,
body {
  height: 100%;
  margin:0;
  background:linear-gradient(180deg, #EC6F66 10%, #F3A183 100%);
  font-family: 'Source Sans Pro', sans-serif;
}

select {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
}
.container{
  padding-top:100px;
}
.container-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 600;
  display:block;
  text-align:center;
  color:#fff;
}
.group {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 200px;
  margin: 10px;
  height: 120px;
}
h2 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 300;
  margin-top: 0;
}


/* real select */
#select-wrap {
  position: relative;
}

#select {
  border: 0;
  padding: 0px 20px;
  outline: 0;
  color: #7b7b7b;
  border: 1px solid #efefef;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  width: 200px;
  height: 55px;
}

.select__arrow {
  position: absolute;
  top: 25px;
  right: 20px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}


/* fake select */

.selected-item {
  position: relative;
  width: 200px;
  height: 55px;
}

.selected-item:after {
  content: '';
  display: block;
  position: absolute;
  top: 25px;
  right: 20px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}

.option-wrap {
  display: none;
  border:1px solid #e6e6e6;
}

.option {
  color: #7b7b7b;
  border: 1px solid #efefef;
  position: relative;
  cursor: pointer;
  padding: 0px 20px;
  background:#fff;
}
.option:hover{
  background:#e6e6e6;
}
.option input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.option p span {
  color: #e40046;
  font-weight: 600;
}

.active {
  display: block;
}

$(".selected-item").click(function() {
  $(this).toggleClass("select_onclick");
  $(this).siblings(".option-wrap").toggleClass("active");
});

$('input[type="radio"]').on("click", function() {
  var selectedOption = $(this).parents('.option').clone();
  $(this).parents().siblings('.selected-item').html(selectedOption);
  $(this).parents().removeClass("active");
  $(this).parents().siblings('.selected-item').removeClass("select_onclick");
});