Module «select». Кастомный select

Демо:

https://codepen.io/ildar-meyker/pen/YzJjpVW

Плагины:

https://jquery.com

https://kvlsrg.github.io/jquery-custom-select/

Подключение:

//

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-custom-select@1.6.4/dist/js/jquery.custom-select.min.js"></script>

Разметка:

//

<select class="select-default">
    <option value="1">First Item</option>
    <option value="2">Second Item</option>
    <option value="3">Third Item</option>
    <option value="4">Fourth Item</option>
    <option value="5">Fifth Item</option>
</select>

Стили:

//

.select-default {
    position: relative;

    &--active {
        .select-default__option--value {
            border-radius: 0.5rem 0.5rem 0 0;
            border-bottom-color: transparent;
        }

        .select-default__option--value:after {
            transform: translateY(-50%) scaleY(-1);
        }
    }

    &__option {
        @include reset-button;
        display: block;
        width: 100%;
        padding: calc(12 / 16) + em calc(16 / 16) + em;
        background: #ffffff;
        font-weight: 500;
        font-size: 1.6rem;
        line-height: calc(20 / 16);
        letter-spacing: 0.02em;
        color: #9a9a9a;
        text-align: left;

        &:hover {
            background: #f3f3f3;
        }

        &--value {
            border: 1px solid #e9e9e9;
            border-radius: 0.5rem;
            padding-right: 3em;

            &:after {
                content: " ";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 1em;
                width: 1em;
                height: 1em;
                background: url(../img/icons/arrow-down.svg) no-repeat 50% 50% /
                    contain;
            }
        }
    }

    &__dropdown {
        border: 1px solid #e9e9e9;
        border-top: 0;
        border-radius: 0 0 0.5rem 0.5rem;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        overflow: hidden;
    }
}

Инициализация:

//

$(function () {
    $(".select-default").customSelect({
        block: "select-default",
    });
});