style.scss

list-box {
    position: relative;
    &,
    list,
    list-item,
    .input {
        display: flex;
        flex-direction: column;
    }
    .input {
        flex-direction: row;
        padding-right: 2em;
        cursor: pointer;
        color: #666;
        &:focus~.listbox-icon {
            opacity: 1;
        }
    }
    .listbox-icon,
    .is-toggle-listbox {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .listbox-icon {
        left: 0.3rem;
        opacity: 0.7;
        transition: all .2s ease;
    }
    .is-toggle-listbox {
        right: 0.3rem;
        font-size: 1.5rem;
    }
    list {
        position: absolute;
        top: 100%;
        width: 100%;
        max-height: 0;
        background-color: #fff;
        z-index: 10;
        box-shadow: 0 2px 10px -2px rgba(#000, .1);
        font-size: 0.8rem;
        overflow: hidden;
        transition: max-height .2s ease;
        &.is-visible {
            max-height: 100vh;
        }
        &-item {
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: space-between;
            padding: 0.5rem 1rem;
            cursor: pointer;
            &:not(.is-active):hover {
                background-color: whitesmoke;
            }
            &.is-active {
                background-color: #22adff;
                color: #fff;
            }
        }
    }
}