Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Making Custom Select Box Using JQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 456
    Comment on it

    While designing an HTML form, a lot of time there is a requirement of custom form elements. Below is a tutorial on how to create some nice custom select box with CSS and jQuery.

    <div class="selectBox">
                            <div class="selectBoxTop">
                                <span class="selected"></span>
                                <span class="selectArrow"></span>
                            </div>
                            <div class="selectOptions">
                                <span class="selectOption" value="Option 1">Player 1</span>
                                <span class="selectOption" value="Option 2">Player 2</span>
                                <span class="selectOption" value="Option 3">Player 3</span>
                                <span class="selectOption" value="Option 4">Player 4</span>
                                <span class="selectOption" value="Option 5">Player 5</span>
                            </div>
                        </div>
    
            <style>
            .selectBox {
                width: 205px;
                position: relative;
                margin: 50px auto;
            }
    
    
    
            .selected,.selectArrow,.selectOptions span {
                cursor: pointer;
            }
    
            .selected {
                padding: 9px 11px;
                float: left;
                width: 152px;
                white-space: nowrap;
                overflow: hidden;
                background: url(../images/one.png) no-repeat;
                color: #FFFFFF;
            }
    
            .selectArrow {
                float: right;
                background: url(../images/select&#95;arrow.png) no-repeat;
                width: 31px;
                height: 34px;
            }
    
            .selectBoxTop {
                height: 34px;
                position: relative;
                z-index: 3;
                box-shadow: inset 2px 2px 2px #eee;
            }
    
            .selectOptions {
                position: absolute;
                background: #fff;
                box-shadow: 0px 0px 2px #999;
                border: 1px solid #c5c5c5;
                left: 0;
                top: 36px;
                width:99%;
                display: none;
            }
    
            .selectOptions span {
                display: block;
                padding: 9px 10px;
                white-space: nowrap;
            }
    
    
    
            .selectOptions span:hover {
                background: #ddd;
                color: #fff;
            }
    
            </style>
    
        <script>
        $(function(){
            $('.selectBox').each(function(){
                $(this).children('.selectBoxTop').children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
                $(this).attr('value' , $(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
    
                $(this).children('.selectBoxTop').children('.selected,.selectArrow').click(function(){
                    if($(this).parent().parent().children('.selectOptions').css('display') == "none"){
                        $('.selectBox .selectOptions').hide();
                        $(this).parent().parent().children('.selectOptions').show();
                        $(this).parents('.selectBox').css({'z-index' : '5'});
                    }
                    else{
                        $(this).parent().parent().children('.selectOptions').hide();
                        $(this).parents('.selectBox').css({'z-index' : '1'});
                    }
                });
    
                $(this).find('span.selectOption').click(function(){
                    $(this).parent().hide();
                    $(this).parents('.selectBox').css({'z-index' : '1'});
                    $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
                    $(this).parent().parent('div.selectBox').find('span.selected').html($(this).html());
                });
            });
        });
        </script>
    



    alt text

 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: