<style>
    .dropdown {
        width: 100%;
        margin: 0 20px;
        padding: 20px;
        background-color: white;
        box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.3);
        font-family: "Lato", sans-serif;
    }

    @media (min-width: 768px) {
        .dropdown {
            width: 600px;
        }
    }

    .dropdown__switch:checked+.dropdown__options-filter .dropdown__select {
        transform: scaleY(1);
    }

    .dropdown__switch:checked+.dropdown__options-filter .dropdown__filter:after {
        transform: rotate(-135deg);
    }

    .dropdown__options-filter {
        width: 100%;
        cursor: pointer;
    }

    .dropdown__filter {
        position: relative;
        display: flex;
        padding: 20px;
        color: #595959;
        background-color: #fff;
        border: 1px solid #d6d6d6;
        border-radius: 30px;
        font-size: 14px;
        text-transform: uppercase;
        transition: 0.3s;
    }

    .dropdown__filter:focus {
        border: 1px solid #918FF4;
        outline: none;
        box-shadow: 0 0 5px 3px #918FF4;
    }

    .dropdown__filter::after {
        position: absolute;
        top: 45%;
        right: 20px;
        content: "";
        width: 10px;
        height: 10px;
        border-right: 2px solid #595959;
        border-bottom: 2px solid #595959;
        transform: rotate(45deg) translateX(-45%);
        transition: 0.2s ease-in-out;
    }

    .dropdown__select {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin-top: 5px;
        overflow: hidden;
        box-shadow: 0 5px 10px 0 rgba(152, 152, 152, 0.6);
        transform: scaleY(0);
        transform-origin: top;
        font-weight: 300;
        transition: 0.2s ease-in-out;
    }

    .dropdown__select-option {
        padding: 20px;
        background-color: #fff;
        border-bottom: 1px solid #d6d6d6;
        transition: 0.3s;
    }

    .dropdown__select-option:last-of-type {
        border-bottom: 0;
    }

    .dropdown__select-option:hover {
        background-color: #f9f9f9;
    }
</style>
<div class="dropdown">
    <input type="checkbox" class="dropdown__switch" id="filter-switch" hidden />
    <label for="filter-switch" class="dropdown__options-filter">
        <ul class="dropdown__filter" role="listbox" tabindex="-1">
            <li class="dropdown__filter-selected" aria-selected="true">
                SELECT REGION
            </li>
            <li>
                <ul class="dropdown__select">
                    <li class="dropdown__select-option" role="option" data-val="All">
                        SELECT REGION
                    </li>
                    <li class="dropdown__select-option" role="option" data-val="North America">
                        NORTH AMERICA
                    </li>
                    <li class="dropdown__select-option" role="option" data-val="Central America">
                        CENTRAL AMERICA
                    </li>
                    <li class="dropdown__select-option" role="option" data-val="South America">
                        SOUTH AMERICA
                    </li>
                    <li class="dropdown__select-option" role="option" data-val="Europe">
                        EUROPE
                    </li>
                    <li class="dropdown__select-option" role="option" data-val="Africa">
                        AFRICA
                    </li>
                    <li class="dropdown__select-option" role="option" data-val="Asia">
                        ASIA
                    </li>
                </ul>
            </li>
        </ul>
    </label>
</div>

<script>

    // Change option selected
    const label = document.querySelector('.dropdown__filter-selected');
    const options = Array.from(document.querySelectorAll('.dropdown__select-option'));

    options.forEach(option => {
        option.addEventListener('click', () => {
            let selectedRegion = option.dataset.val;
            console.log(selectedRegion);
            label.textContent = option.textContent;
        });
    });

    // Close dropdown onclick outside
    document.addEventListener('click', e => {
        const toggle = document.querySelector('.dropdown__switch');
        const element = e.target;

        if (element == toggle) return;

        const isDropdownChild = element.closest('.dropdown__filter');

        if (!isDropdownChild) {
            toggle.checked = false;
        }
    });

</script>