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>