Custom Dropdown[Select]

Step 1: Add this Jquery function

function xSelect(tgt) {
    $(tgt + ' select').each(function() {
        var $this = $(this),
            val = $this.children('option:first-child').text();
        if (!$this.parent().hasClass('xSelect')) {
            $this.wrap('<div class="xSelect" style="position:relative;" />');
            $this.parent().append('<p>' + val + '</p>');
            $this.css({
                'position': 'absolute',
                'top': '0px',
                'left': '0px',
                'width': '100%',
                'height': '100%',
                'z-index': '10',
                'opacity': 0
            });
            $this.on('change', function() {
                val = $(this).val();
                $(this).parent().children('p').text(val);
                $(this).blur();
            });
            $(this).focus(function() {
                $(this).parent().addClass('drop');
            }).blur(function() {
                $(this).parent().removeClass('drop');
            });
        }
    });
}

 

Step 2: Add this default css  Continue reading “Custom Dropdown[Select]”

Advertisements