Стилизуем любой Select на сайте

Была задача сделать select не таким как обычно, а со своим стилем. Решил задачу так:

• Был создан обычный input
• При клике по этому input'у срабатывало раскрытие droopdown списка
• При клике по элементу списка JavaScript'ом передавал значение выбранного в input
• Закрывал droopdown список

В данном ниже примере я использовал фреймворк UiKit

Разметка input'а  с droopdown списком

<div class="uk-form-controls uk-flex uk-inline">
                    <button class="uk-modal-rent-button" type="button">
                    <input class="uk-modal-rent-input-select" type="text" id="language" name="language" placeholder="Choose a language" disabled>
                    <img class="uk-modal-rent-logo-droopdown" src="<?php echo $config->urls->templates; ?>images/droopdown.svg" alt="" uk-img>
                    </button>
                    <div class="uk-modal-rent-selectblock" uk-dropdown="mode: click">
                        <p class="uk-modal-rent-selectblock-item">English</p>
                        <p class="uk-modal-rent-selectblock-item">Espanol</p>
                    </div>
                </div>

JavaScript

//Select Language script from Modal Reserve Now
document.addEventListener("click", function(e) {
    if (e.target.className=="uk-modal-rent-selectblock-item") {
    console.log ("Клик");
    let selectItem = e.target.textContent;
    console.log(selectItem);
    document.querySelector(".uk-modal-rent-input-select").value = selectItem;
    //document.querySelector(".uk-modal-rent-selectblock").classList.remove('uk-open');
    //document.querySelector(".uk-modal-rent-button").setAttribute("aria-expanded", "false");
    UIkit.dropdown(".uk-modal-rent-selectblock").hide();
    }
});

Две закомментированные строки, это моментальное закрытие droopdown списка, в данном примере писались для UiKit.