Tags

, , , ,

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 

.xSelect {
position:relative;
border:1px solid #ccc;
width:100px;
border-radius:2px;
padding:5px 30px 5px 10px;
}

.xSelect:after {
content:'';
position:absolute;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjElEQVQ4T2NkoBAwUqifYRgaoAkMk/tA/ANP2OgB5S4D8X+QGvQwYAaKhQPxBiD+hsUQa6DYWyC+AZPDFohMUEO2AOnPSIY4ANnPgPgWssG4YgEkHgbEO4D4IxA7A/EDIL6L7ip80QiSCwHif0B8FmoAhq8IpQOQvAAQv8cSHmAhQgbg0gcXHzWAgQEAio4UEWwu7fAAAAAASUVORK5CYII=);
width:16px;
height:16px;
right:10px;
top:0;
bottom:0;
margin:auto 0;
}

.xSelect.drop:after {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVQ4T2NkoBAwUqifYQQYIA4MIwkgvogrrPCFgTRQky4QvwBiJiA+h80QXAbIARVrAPEuqCaQQexAfAbdEGwGKAEVgfAeNMVaQD4vEJ9EFkc3QBUoKQvE+3D4WR0oLgzEx2Dy6AYIASXeEUhcgkD597gMIDlhjoCUSDBMAJzbCxGOT6ShAAAAAElFTkSuQmCC);
}

.xSelect p {
font-size:12px;
margin:0;
}

 

Step 3: Now you have to call the function to apply custom Select

$(function(){
     /* xSelect([parent element class name or id]); */
     xSelect('.CustomEle');
});

 

Click Here To See Working Example

 

Advertisements