<div>
  <select name="select" id="">
    <option value="">Цвет</option>
    <option value="Красный">Красный</option>
    <option value="Белый">Белый</option>
  </select>
</div>

<div class="dropdown">
  <span>Цвет</span>
  <i class="material-icons">arrow_drop_down</i>
  <ul>
    <li>Красный</li>
    <li>Белый</li>
  </ul>
</div>

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div {
  margin: 50px;
}

.dropdown {
  font-size: 18px;
}

.dropdown span, .dropdown ul li {
  width: 150px;
  cursor: pointer;
}

.dropdown span {
  display: inline-block;
  vertical-align: middle;
  padding-left: 10px;
  margin-bottom: 15px;
  line-height: 1.5;
  background-color: #e8e8e8;
}

.dropdown i {
  display: inline-block;
  margin-left: -35px;
}

.dropdown ul {
  display: none;
}

.dropdown ul li {
  margin: 10px 0;
  line-height: 1.5;
  background-color: #e8e8e8;
  text-align: center;
}

const dropSelect = $('.dropdown span');
const dropOption = $('.dropdown ul li');

dropSelect.on('click', function() {
  $(this).siblings('ul').slideToggle('fast');  
});

dropOption.on('click', function() {
  let textOption =  $(this).text();
  $(this).parents().find('span').text(textOption);
  dropOption.parent().slideToggle('fast');
  $('select option[value="'+textOption+'"]').prop('selected', true);
});