Custom File Browse

12049329_1197054443643486_8193997852542435752_n

HTML:

<div class="addFileStyle">
    <input type="file" />
</div>

 

Step 1: Add this Jquery function

function xfilebrowse(tgt){  
    $(tgt+' input[type=file]').each(function() {
        $(this).wrap('<div class="upldwrap" />');
        $(this).parent().append('<input type="text" /> <input type="button" value="Browse" class="grey_btn" />');
        $(this).css('opacity', 0);
        $(this).on('change', function() {
            var txt = $(this).val();
            txt = txt.replace(/\\/g, '/').replace(/.*\//, '');
            $(this).siblings('input[type=text]').val(txt);
        })
    });
}

 

Step 2: Add this default css  Continue reading “Custom File Browse”

Advertisements

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]”

Custom Radio Button

Step 1: Add this Jquery function

function xRadio(tgt) {
    $(tgt + ' input:radio').each(function(e) {
        if (!$(this).parent().hasClass('xRadio')) {
            $(this).fadeTo(0, 0).wrap('<div class="xRadio" style="position:relative;" />');
            $(this).css({
                'position': 'absolute',
                'width': '100%',
                'height': '100%',
                'left': '0',
                'top': '0',
                'z-index': '10'
            });
            if ($(this).is(':checked')) {
                $(this).parent().addClass('checked');
            }
            $(this).on('change', function() {
                var nam = $(this).attr('name');
                if ($(this).is(':checked')) {
                    $('input:radio[name="' + nam + '"]').parent(".xRadio").removeClass('checked');
                    $(this).parent().addClass('checked');
                }
            });
            $(this).parent().next('label').on('click', function() {
                $(this).prev().find('input:radio').trigger('click');
            });
        }
    });
}

 

Step 2: Add this default css  Continue reading “Custom Radio Button”

Custom Checkbox

Step 1: Add this Jquery function

function xCheckbox(tgt){
	$(tgt+' input[type=checkbox]').each(function(){
        if(!$(this).parent().hasClass('xCheckbox')){
                $(this).fadeTo(0,0).wrap('


<div class="xCheckbox" style="position:relative;" />');
                $(this).css({'position':'absolute','width':'100%','height':'100%','left':'0','top':'0','z-index':'10'});
                if($(this).is(':checked')){$(this).parent().addClass('checked');}
                $(this).on('change',function(){
                if($(this).is(':checked')){
                    $(this).parent().addClass('checked');
                } else {
                    $(this).parent().removeClass('checked');
                }
            });
        }
    });
}

 

Step 2: Add this default css  Continue reading “Custom Checkbox”