Module «select-underline». Кастомный select с нижней границей. На базе jquery.custom-select.js

Source:

https://html.ildar-meyker.ru/html-gosha/components.html?tab=tab-selects

Демо:

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

Плагины:

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-underline" data-placeholder="SUBJECT">
    <option>SUBJECT SUBJECT 1</option>
    <option>SUBJECT SUBJECT 2</option>
    <option>SUBJECT SUBJECT 3</option>
</select>

Стили:

// blocks/selects/select-underline.scss

.select-underline {
    position: relative;
    display: inline-block;

    &--active {
        .select-underline__option--value {
        }

        .select-underline__option--value:after {
            transform: translateY(-50%) scaleY(1);
        }
    }
    &--dropup {
        .select-underline__dropdown {
            top: auto;
            bottom: 100%;
        }
    }

    &__option {
        @include reset-btn;
        display: block;
        width: 100%;
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.2;
        text-align: left;
        padding: 1rem 0;
        white-space: nowrap;

        &--value {
            border: 1px solid #101010;
            border-width: 1px 0;
            border-top-color: transparent;
            padding: 1.7rem 0;
            padding-right: 2.5rem;

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

    &__dropdown {
        transform: translateX(-2rem);
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        background: #fff;
        padding: 1rem 2rem;
        z-index: 10;

        .select-underline__option {
            &:hover {
                color: #878787;
            }
        }
    }

    &__placeholder {
        color: #b7b7b7;
    }
}

@media (min-width: 1000px) {
    .select-underline {
        &__option {
            font-size: 1.4rem;
        }
    }
}

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

// modules/select-underline.js

$(function () {
    const namespace = "select-underline";

    $(`.${namespace}`).each(function () {
        const { placeholder } = $(this).data();

        $(this).customSelect({
            placeholder: `<span class="${namespace}__placeholder">${placeholder}</span>`,
            block: namespace,
        });
    });
});