JSFiddle - React, Tailwind, and code Playground

HTML

<div class="customSelect" style="width: 195px;">
    <select class="collapse" style="width: 195px; z-index: 0;" onclick='showList(this,"listeSecteurs")'>
        <option style="height: 0px;">-&nbsp;Select your options&nbsp;-</option>
    </select><br>
    <div class="hideableSelectList" style="z-index: 10;">
        <div id="listeSecteurs" style="display: none; left: 0px;">
          <ul style="list-style-type: none;">
            <li><input type="checkbox">val 1</li>
            <li><input type="checkbox">val 2</li>
            <li><input type="checkbox">val 3</li>
            <li><input type="checkbox">val 4</li>
            <li><input type="checkbox">val 5</li>
          </ul>
        </div>
    </div>
</div>

CSS

.customSelect{
    width: calc(100% - 2px);
    background-color: white; 
    border: solid 1px #AAAAAA;
    border-top-width: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;            
}     
.customSelect select{
    width: 100%; 
    padding: 5px 8px;
    border: 0px;        
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow:hidden; 
}
.customSelect select.collapse{
    background: transparent url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat; 
    background-size: 10px;
    background-position: right 10px center;
}
.customSelect select.expanded{
    background: transparent url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/cross-24-128.png') no-repeat; 
    background-size: 10px;
    background-position: right 10px center;
}
.hideableSelectList{
    position: relative;    
}
.hideableSelectList div{
    background-color: white;
    max-height: 300px;
    width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    padding: 0px 10px;
    border: solid 1px #C0C0C0;
    z-index: 3;
}

JavaScript

function showList(input,sIdTarget)
{
    //hide the dropdown list, compatible with all browser
    $(input).css({ "display": "none" }).blur().css({"display": "" });
    
    if($("#"+sIdTarget).css("display") == "none")
    {
        $(input).addClass("expanded");
        $(input).removeClass("collapse");
        /*$.each($(input).find('option'),function(index,elmnt)
        {
            $(elmnt).hide();
        });  */
        
        $("#"+sIdTarget).css("display","");
    }
    else
    {
        $(input).addClass("collapse");
        $(input).removeClass("expanded");
        /*$.each($(input).find('option'),function(index,elmnt)
        {
            $(elmnt).css("display","");
        });*/
        
        $("#"+sIdTarget).css("display","none");
        
    }
}