Стилизация select с помощью CSS для Contact Form7

Как-то на одном проекте возникла необходимость стилизовать тег <select> и его пункты. Как известно с помощью простого CSS он не стилизуется так, как бы этого хотелось. В сети нашел решение. Решение реализовано на CSS и jQuery, взял его на этом сайте. Здесь выложу уже рабочий код, который применил для своих нужд, для плагина Contact Form, отличается он немного скриптом, так как я реализовал, чтобы в описание поля попадало первое значение из выпадающего списка. Так как само поле с выпадающим списком формируется через плагин Contact Form7 и его нельзя поправить.

1. В Contact Form7 я создал поле с выпадающим списком.

2. В сниппете прописал следующий код:

// стилизация SELECT
jQuery('.wpcf7-select').each(function() {
    const _this = jQuery(this),
        selectOption = _this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        duration = 450; // длительность анимации 

    _this.hide();
    _this.wrap('<div class="select"></div>');
    jQuery('<div>', {
        class: 'new-select',
        text: _this.children('option:first').text()
    }).insertAfter(_this);

    const selectHead = _this.next('.new-select');
    jQuery('<div>', {
        class: 'new-select__list'
    }).insertAfter(selectHead);

    const selectList = selectHead.next('.new-select__list');
    for (let i = 1; i < selectOptionLength; i++) {
        jQuery('<div>', {
            class: 'new-select__item',
            html: jQuery('<span>', {
                text: selectOption.eq(i).text()
            })
        })
        .attr('data-value', selectOption.eq(i).val())
        .appendTo(selectList);
    }

    const selectItem = selectList.find('.new-select__item');
    selectList.slideUp(0);
    selectHead.on('click', function() {
        if ( !jQuery(this).hasClass('on') ) {
            jQuery(this).addClass('on');
            selectList.slideDown(duration);

            selectItem.on('click', function() {
                let chooseItem = jQuery(this).data('value');

                jQuery('select').val(chooseItem).attr('selected', 'selected');
                selectHead.text( jQuery(this).find('span').text() );

                selectList.slideUp(duration);
                selectHead.removeClass('on');
            });

        } else {
            jQuery(this).removeClass('on');
            selectList.slideUp(duration);
        }
    });
});

3. И прописал стили для этого селекта,

.chm_modal_uslugi .form-contact .select {
    display: block;
    width: 100%;
    position: relative;
    margin: 0 0 10px 0;
}
.chm_modal_uslugi .form-contact .new-select {
    position: relative;
    border: none;
    background-color: #f4f6fb;
    padding: 10px 10px;
    cursor: pointer;
    user-select: none;
    border-radius:8px;
    font-size: 14px;
    font-family: Roboto;
    line-height: 1.15;
}
.chm_modal_uslugi .form-contact .new-select__list {
    position: absolute;
    top: 35px;
    left: 0;
    border: none;
    cursor: pointer;
    width: 100%;
    z-index: 2;
    background: #f4f6fb;
    user-select: none;
}
.chm_modal_uslugi .form-contact .new-select__list.on {
    display: block;
}
.chm_modal_uslugi .form-contact .new-select__item span {
    display: block;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    font-weight: 600;
}
.chm_modal_uslugi .form-contact .new-select__item span:hover {
    background: #ecf0f8;
}
.chm_modal_uslugi .form-contact .new-select:after {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 9px;
    top: 5px;
    background: url('/wp-content/themes/for_oxygen/img/icn-r-chevron-selectel.svg') no-repeat right center / cover;
    opacity: 0.6;

    -webkit-transition: all .27s ease-in-out;
    -o-transition: all .27s ease-in-out;
    transition: all .27s ease-in-out;

    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.chm_modal_uslugi .form-contact .new-select.on:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Получилось очень симпатично, а главное просто.