Кастомный селектор на JS + стили

Category: WordPress

Пример верстки селектора. Структуру оставляем такую же, классы важны.

<div class="dropdown">
    <div class="select">
        <span class="crypto-span">--</span>
        <i class="fa fa-chevron-left"></i>
    </div>
        <input class="crypto-input" type="hidden">
    <ul class="dropdown-menu crypto-list">
        <li>
            <div class="crypto-item">
                <img src="../icons/bitcoin.jpg">
                <p>BTC</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/eth.jpg">
                <p>ETH</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/ltc.png">
                <p>LTC</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/dash.png">
                <p>DASH</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/zcash.png">
                <p>ZEC</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/logo_bnb.png">
                <p>BNB</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/logo_dogecoin.png">
                <p>DOGE</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/logo_tron.png">
                <p>TRX</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/busd.png">
                <p>BUSD</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/USDC.png">
                <p>USDC</p>
            </div>
        </li>
        <li>
            <div class="crypto-item">
                <img src="../icons/tether.png">
                <p>USDT</p>
            </div>
        </li>
    </ul>
</div>

Стили для селектора, можно полностью кастомизировать. Для того что бы не подсвечивались input  вставляем в стили такую строчку:

:focus-visible {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 0px;

Сами стили:

/* Selector */

 .dropdown {
    width: 48%;
    height: 48px!important;
    display: inline-block;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    transition: all .5s ease;
    position: relative;
    font-size: 14px;
    color: #474747;
    text-align: left;
    padding: 14px 20px;
}
 .dropdown .select {
    cursor: pointer;
    display: block;
    padding: 0px
}
 .dropdown .select::before {
    position: absolute;
    top: 15px;
    right: 25px;
    width: 14px;
    height: 5px;
    content: url("icons/angle-down-solid.svg")
}
 .dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 20px
}
 .dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
 .dropdown:active {
    background-color: #f8f8f8
}
 .dropdown.active:hover,
 .dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8
}
 .dropdown.active .select > i {
    transform: rotate(-90deg)
}
 .dropdown .dropdown-menu {
    position: absolute;
    background-color: #FFFFFF;
    width: 100%;
    left: 0;
    margin-top: 20px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
 .dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
 .dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
 .dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
 .dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}
 .dropdown .dropdown-menu li > .crypto-item {
    display: flex;
    align-items: center;
    flex-direction: row;
}
 .dropdown .dropdown-menu li > .crypto-item > img {
    width: 25px;
    height: 25px;
    margin-right: 15px;
}

Js код который нужен для работы селектора:

(Работает с jQuery)

function Selector () {
    $('.dropdown').click(function () {
        $(this).attr('tabindex', 1).focus();
        $(this).toggleClass('active');
        $(this).find('.dropdown-menu').slideToggle(300);
    });

    $('.dropdown').focusout(function () {
        $(this).removeClass('active');
        $(this).find('.dropdown-menu').slideUp(300);
    });

    $('.dropdown .dropdown-menu li').click(function () {
        $(this).parents('.dropdown').find('span').text($(this).text());
        $(this).parents('.dropdown').find('input').attr('value', $(this).attr('answer')); //Эта строчка заполняет input. Сюда можно указать и сам текст li, будет виглядеть так:
        // $(this).parents('.dropdown').find('input').attr('value', $(this).text(); или можно указать любой ваш атрибут.
    });
};
Selector();