Select dropdown (Light & Dark)

index.html

<select class="dropdown" placeholder="Please choose">
    <option>List entry #1</option>
    <option>List entry #2</option>
    <option>List entry #3</option>
    <option>List entry #4</option>
    <option>List entry #5</option>
    <option>List entry #6</option>
    <option>List entry #7</option>
    <option>List entry #8</option>
    <option>List entry #9</option>
    <option>List entry #10</option>
    <option>List entry #11</option>
    <option>List entry #12</option>
</select>

<label class="switch">
    <input type="checkbox">
    <span>Light</span>
</label>
            
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5430765-Select-dropdown" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

script.js

$('select.dropdown').each(function() {

    var dropdown = $('<div />').addClass('dropdown selectDropdown');

    $(this).wrap(dropdown);

    var label = $('<span />').text($(this).attr('placeholder')).insertAfter($(this));
    var list = $('<ul />');

    $(this).find('option').each(function() {
        list.append($('<li />').append($('<a />').text($(this).text())));
    });

    list.insertAfter($(this));

    if($(this).find('option:selected').length) {
        label.text($(this).find('option:selected').text());
        list.find('li:contains(' + $(this).find('option:selected').text() + ')').addClass('active');
        $(this).parent().addClass('filled');
    }

});

$(document).on('click touch', '.selectDropdown ul li a', function(e) {
    e.preventDefault();
    var dropdown = $(this).parent().parent().parent();
    var active = $(this).parent().hasClass('active');
    var label = active ? dropdown.find('select').attr('placeholder') : $(this).text();

    dropdown.find('option').prop('selected', false);
    dropdown.find('ul li').removeClass('active');

    dropdown.toggleClass('filled', !active);
    dropdown.children('span').text(label);

    if(!active) {
        dropdown.find('option:contains(' + $(this).text() + ')').prop('selected', true);
        $(this).parent().addClass('active');
    }

    dropdown.removeClass('open');
});

$('.dropdown > span').on('click touch', function(e) {
    var self = $(this).parent();
    self.toggleClass('open');
});

$(document).on('click touch', function(e) {
    var dropdown = $('.dropdown');
    if(dropdown !== e.target && !dropdown.has(e.target).length) {
        dropdown.removeClass('open');
    }
});

// light
$('.switch input').on('change', function(e) {
    $('.dropdown, body').toggleClass('light', $(this).is(':checked'));
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

select-dropdown-light-dark.markdown

Select dropdown (Light & Dark)

A Pen by 王树贤 on CodePen.

License.

style.scss

.dropdown {
    --max-scroll: 4;
    --text: #3F4656;
    --border: #2F3545;
    --borderActive: #23C4F8;
    --background: #151924;
    --arrow: #6C7486;
    --arrowActive: #E4ECFA;
    --listText: #99A3BA;
    --listBackground: #F5F9FF;
    --listActive: #E4ECFA;
    --listTextActive: #6C7486;
    --listBorder: none;
    --textFilled: #99A3BA;
    &.light {
        --text: #CDD9ED;
        --border: #CDD9ED;
        --borderActive: #23C4F8;
        --background: #fff;
        --arrow: #99A3BA;
        --arrowActive: #6C7486;
        --listText: #99A3BA;
        --listBackground: #fff;
        --listActive: #F5F9FF;
        --listTextActive: #6C7486;
        --listBorder: #E4ECFA;
        --textFilled: #6C7486;
    }
    width: 220px;
    position: relative;
    select {
        display: none;
    }
    & > span {
        cursor: pointer;
        padding: 9px 16px;
        border-radius: 6px;
        display: block;
        position: relative;
        color: var(--text);
        border: 1px solid var(--border);
        background: var(--background);
        transition: all .3s ease;
        &:before,
        &:after {
            content: '';
            display: block;
            position: absolute;
            width: 8px;
            height: 2px;
            border-radius: 1px;
            top: 50%;
            right: 15px;
            background: var(--arrow);
            transition: all .3s ease;
        }
        &:before {
            margin-right: 4px;
            transform: scale(.96, .8) rotate(50deg);
        }
        &:after {
            transform: scale(.96, .8) rotate(-50deg);
        }
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        max-height: calc(var(--max-scroll) * 42px);
        top: 42px;
        left: 0;
        z-index: 1;
        right: 0;
        background: var(--listBackground);
        border-radius: 6px;
        overflow-x: hidden;
        overflow-y: auto;
        transform-origin: 0 0;
        transition: opacity .2s ease, visibility .2s ease, transform .3s cubic-bezier(.4, .6, .5, 1.32);
        transform: scale(.8) translate(0, 4px);
        border: 1px solid var(--listBorder);
        li {
            opacity: 0;
            transform: translate(6px, 0);
            transition: all .3s ease;
            a {
                cursor: pointer;
                display: block;
                padding: 10px 16px;
                color: var(--listText);
                text-decoration: none;
                outline: none;
                position: relative;
                transition: all .3s ease;
                &:hover {
                    color: var(--listTextActive);
                }
            }
            &.active {
                a {
                    color: var(--listTextActive);
                    background: var(--listActive);
                    &:before,
                    &:after {
                        --scale: .6;
                        content: '';
                        display: block;
                        width: 10px;
                        height: 2px;
                        position: absolute;
                        right: 17px;
                        top: 50%;
                        opacity: 0;
                        background: var(--listText);
                        transition: all .2s ease;
                    }
                    &:before {
                        transform: rotate(45deg) scale(var(--scale));
                    }
                    &:after {
                        transform: rotate(-45deg) scale(var(--scale));
                    }
                    &:hover {
                        &:before,
                        &:after {
                            --scale: .9;
                            opacity: 1;
                        }
                    }
                }
            }
            &:first-child {
                a {
                    border-radius: 6px 6px 0 0;
                }
            }
            &:last-child {
                a {
                    border-radius: 0 0 6px 6px;
                }
            }
        }
    }
    &.filled {
        & > span {
            color: var(--textFilled);
        }
    }
    &.open {
        & > span {
            border-color: var(--borderActive);
            &:before,
            &:after {
                background: var(--arrowActive);
            }
            &:before {
                transform: scale(.96, .8) rotate(-50deg);
            }
            &:after {
                transform: scale(.96, .8) rotate(50deg);
            }
        }
        ul {
            opacity: 1;
            visibility: visible;
            transform: scale(1) translate(0, 12px);
            transition: opacity .3s ease, visibility .3s ease, transform .3s cubic-bezier(.4, .6, .5, 1.32);
            li {
                opacity: 1;
                transform: translate(0, 0);
                $i: 1;
                @while $i <= 10 {
                    $delay: $i * 80;
                    &:nth-child(#{$i}) {
                        transition-delay: #{$delay}ms;
                    }
                    $i: $i + 1;
                }
            }
        }
    }
}

select {
    --text: #3F4656;
    --border: #2F3545;
    --background: #151924;
    &.dropdown {
        padding: 9px 16px;
        border-radius: 6px;
        color: var(--text);
        border: 1px solid var(--border);
        background: var(--background);
        line-height: 22px;
        font-size: 16px;
        font-family: inherit;
        -webkit-appearance: none;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// switch

.switch {
    height: 20px;
    display: block;
    position: relative;
    cursor: pointer;
    input {
        display: none;
        & + span {
            padding-left: 38px;
            min-height: 20px;
            line-height: 20px;
            display: block;
            color: #3F4656;
            position: relative;
            white-space: nowrap;
            &:not(:empty) {
                padding-left: 38px + 8;
            }
            &:before,
            &:after {
                content: '';
                display: block;
                position: absolute;
                border-radius: 10px;
            }
            &:before {
                top: 0;
                left: 0;
                width: 38px;
                height: 20px;
                border: 1px solid #2F3545;
                transition: all .3s ease;
            }
            &:after {
                width: 14px;
                height: 14px;
                background: #2F3545;
                top: 3px;
                left: 3px;
                transition: all .45s ease;
            }
            & + svg {
                display: none;
            }
        }
        &:checked {
            & + span {
                &:before {
                    background: #5628EE;
                    border-color: #5628EE;
                }
                &:after {
                    background: #fff;
                    transform: translate(18px, 0);
                }
            }
        }
    }
    &:hover {
        input {
            &:not(:checked) {
                & + span {
                    &:before {
                        border-color: #23C4F8;
                    }
                }
            }
        }
    }
}

// Center & dribbble
body {
    --bg: #171C28;
    min-height: 100vh;
    font-family: 'Mukta Malar', Arial;
    line-height: 22px;
    font-size: 16px;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    transition: background .3s ease;
    background: var(--bg);
    &.light {
        --bg: #F5F9FF;
    }
    .switch {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .dropdown {
        margin-top: 60px;
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet" />