Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Custom select box

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 335
    Comment on it

    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 :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: