Custom Select / jQuery SCSS

custom-select.js

if(jQuery('select.hidden-select').length){
    initCustomSelect();
}
function initCustomSelect(){

// Iterate over each select element
jQuery('select.hidden-select').each(function () {

    // Cache the number of options
    var $originalSelectElement = jQuery(this),
        numberOfOptions = jQuery(this).children('option').length;

    // Hides the select element
    $originalSelectElement.addClass('s-hidden');

    // Wrap the select element in a div
    $originalSelectElement.wrap('<div class="custom-select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $originalSelectElement.after('<div class="le-select"></div>');

    // Cache the styled div
    var $leSelect = $originalSelectElement.next('div.le-select');

    // Show the first select option in the styled div
    $leSelect.text($originalSelectElement.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = jQuery('<ul />', {
        'class': 'options'
    }).insertAfter($leSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        jQuery('<li />', {
            text: $originalSelectElement.children('option').eq(i).text(),
            rel: $originalSelectElement.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');

    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $leSelect.click(function (e) {
        e.stopPropagation();
        jQuery('div.le-select.active').each(function () {
            jQuery(this).removeClass('active').next('ul.options').hide();
        });
        jQuery(this).toggleClass('active').next('ul.options').toggle();
    });

    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function (e) {
        e.stopPropagation();
        $leSelect.text($(this).text()).removeClass('active');
        $originalSelectElement.val($(this).attr('rel'));
        $originalSelectElement.trigger('change');
        $list.hide();
        /* alert($originalSelectElement.val()); Uncomment this for demonstration! */
    });

    // Hides the unordered list when clicking outside of it
    jQuery(document).click(function () {
        $leSelect.removeClass('active');
        $list.hide();
    });

});

}

custom-select.scss

.dropdowncustom{
    position: relative;
    &:before{
        content: "\f078";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        color:black;
        font-size: 15px;
        right:15px;
        top:30%;
    }
}




.custom-select{
    position: relative;
    .s-hidden {
        visibility: hidden;

        padding-right: 10px;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .le-select {
        text-align: center;
        text-transform: capitalize;
        min-width:190px;
        @extend .dropdowncustom;
        cursor: pointer;
        display: inline-block;
        position: relative;

        color: black;

        background-color: white;
        border-radius: 10px;


        font-size: 18px;
        font-weight: 400;
        padding: 12px 50px;


        &:active {
            background-color: #eee;
        }
    }
    .le-select.active {
        background-color: #eee;
    }
    .options {
        display: none;

        cursor: pointer;
        color: black;

        border:none;

        width:100%;
        font-size: 15px;

        -webkit-appearance: none;


        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 999;
        margin: 0 0;
        padding: 0 0;
        list-style: none;

        background-color: white;

        li {

            margin: 0 0;
            display: flex;

            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: 400;
            padding: 12px 50px;

            &:hover {
                background-color: #39f;
                color: white;
            }
        }
    } 
}

gistfile1.txt

<?php 

$out.='<select class="hidden-select">';

    
    if ( $children ) { 
        foreach( $children as $subcat )
        {
            $out.= '<option value="' . esc_url(get_term_link($subcat, $subcat->taxonomy)) . '">' . $subcat->name . '</option>';
        }
    }
    $out.='</select>';
    return $out;
?>