JSFiddle - React, Tailwind, and code Playground

by Vaniljs

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<select name="materialColor" class="materialColor" id="materialColor">
		    <option value="" selected="selected">Выберите цвет материала</option>
		    <option value="black">Черный</option>
		    <option value="gray">Серый</option>
		    <option value="beige">Бежевый</option>
		    <option value="red">Красный</option>
		    <option value="brown">Коричневый</option>
		    <option value="blue">Синий</option>
		    <option value="orange">Оранжевый</option>
		    <option value="purple">Фиолетовый</option>
		    <option value="green">Салатовый</option>
		    <option value="white">Белый</option>
		    <option value="yellow">Желтый</option>
		</select>
    <p>Выбран материал:<span id="material"></span></p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
<select name="kantcolor" class="kantcolor" id="kantcolor">
		    <option value="" selected="selected">Выберите цвет канта</option>
		    <option value="kblack">Черный</option>
		    <option value="kgray">Серый</option>
		    <option value="kdgray">Темно-серый</option>
		    <option value="kred">Красный</option>
		    <option value="kdblue">Темно-синий</option>
		    <option value="kblue">Синий</option>
		    <option value="kbiege">Бежевый</option>
		    <option value="kwhite">Белый</option>
		    <option value="kbrown">Коричневый</option>
		    <option value="korange">Оранжевый</option>
		    <option value="kgreen">Салатовый</option>
		    <option value="kwhite">Белый</option>
		    <option value="kyellow">Желтый</option>
		    <option value="kpurple">Фиолетовый</option>
		</select>
   <p>Выбран кант: <span id="kant"></span></p>

CSS

/* Селект */
/*select start*/
.select_wrapper i {
    color: #757575;
    float: right;
    margin-top: -16px;
    display: block;
    transition: 0.3s ease-in-out;
}

.rotate {
    transform: rotate(180deg);
    animation-duration: 5s;
    transition: 0.3s ease-in-out;
}

.select_wrapper {
    border: 1px solid #bfbfbf;
    font: 20px/18px Acrom;
    color: #000;
    width: 200px;
        padding: 7px 12px 11px 33px;
    margin-bottom: 15px;
    display: inline-block;
    
    cursor: pointer;
    position: relative;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}
.select_wrapper:focus {
    border: 1px solid #235D81;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}
.select_wrapper span {
    display: block;
    margin: 7px 0 0 0;
    width: 100% !important;
}
.select_wrapper .select_inner {
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: #687278;
    display: none;
    position: absolute;
    left: 0;
    top: 38px;
    width: 99%;
    z-index: 3;
    border: 1px solid #fff;
    height: 400px;
    overflow: auto;
}
.select_wrapper ul {
    padding-left: 0;
    margin-left: 0;
}
.select_wrapper .select_inner li {
    list-style: none;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
}
.select_wrapper .select_inner li:hover {
    background: #eee;
}
.select_wrapper .select_inner li:last-child {
    border: none;
    border-radius: 0 0 5px 5px;
}
.select_wrapper .select_inner li:first-child {
    border-radius: 5px 5px 0 0;
}
/*select end*/

JavaScript

// Цвет материала
$(document).ready(function (){
    $('#materialColor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#materialColor').parent().prepend(function() {
      return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#materialColor').parent().children('span').width($('#materialColor').width());
    $('#materialColor').css('display', 'none');
    $('#materialColor').parent().append('<ul class="select_inner"></ul>');
    $('#materialColor').children().each(function(){
        var opttext = $(this).text();
        var optval = $(this).val();
        $('#materialColor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');
    });
    $('#materialColor').parent().find('li').on('click', function (){
        var cur = $(this).attr('id');
        $('#materialColor').parent().children('span').text($(this).text());
        $('#materialColor').children().removeAttr('selected');
        $('#materialColor').children('[value="'+cur+'"]').attr('selected','selected');
        console.log($('#materialColor').children('[value="'+cur+'"]').text());
    });
    $('#materialColor').parent().on('click', function (){
        $(this).find('ul').slideToggle('fast');
    });
});

// function selectedMaterial(){
	document.getElementById('material').innerHTML = 'ЗДЕСЬ ВЫБРАНЫЙ МАТЕРИАЛ';
// };

// Цвет канта
$(document).ready(function (){
    $('#kantcolor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#kantcolor').parent().prepend(function() {
      return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#kantcolor').parent().children('span').width($('#kantcolor').width());
    $('#kantcolor').css('display', 'none');
    $('#kantcolor').parent().append('<ul class="select_inner"></ul>');
    $('#kantcolor').children().each(function(){
        var...