Hello Friends,

If you are looking to create a custom select box, you can use below HTML and CSS code I have provided.

Below an example of custom select box.

HTML -

<div class="wrapper">
        <input id="textfield" type="text" name="" value="" placeholder="Select">
        <ul class="list-option">
                 <li>Bahrain</li>
            <li>Bangladesh</li>
            <li>Barbados</li>
            <li>Belarus</li>
            <li>Belgium</li>
            <li>Belize</li>
            <li>Benin</li>
            <li>Bhutan</li>
            <li>Bolivia</li>
        </ul>
    </div>

CSS -

div{
    width:200px;
    margin:10px auto;
}
input{
    width:100%;
    border:1px solid #00a9c8;
    padding:5px 20px 5px 5px;
    background:url(https://raw.githubusercontent.com/mukulkant/easy-custom-select-box/master/tg.png) no-repeat 97% center / 10px 8px;
    font-size:13px;
}
ul{
    display:none;
    background:#00a9c8;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}
ul li{
    list-style:none;
    width:200px;
    padding:5px;
    color:#fff;
    font-size:13px;
}
ul li:hover{
    background:#079fba;
}

Script-

$(document).ready(function(){
        $('ul li').click(function(){
            $('#textfield').val($(this).text());
            $('ul').slideUp('fast');
        });
        $('#textfield').focus(function(){
            $('ul').slideDown('fast')
        });
    });
    $(document).on('click', function (e) {
        if ($(e.target).closest("#textfield").length === 0) {
            $("ul").slideUp('fast');;
        }
    });

Output -

Hope It helps you :)