Friday, July 04, 2014

Edit select box dengan css dan jquery

Edit select box dengan css dan jquery, berikut contoh edit select box menggunakan css dan jquery :



Silahkan edit css sesuai dengan keinginan sendiri.

Berikut contoh kode untuk edit select box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Edit select box dengan css dan jquery</title>
<style type="text/css">
    .select-wrapper{
        float: left;
        display: inline-block;
        border: 1px solid #d8d8d8;          
        background: url("../images/dropdown.png") no-repeat right center;
        cursor: pointer;
    }
    .select-wrapper, .select-wrapper select{
        height: 26px;
        line-height: 26px;
    }
    .select-wrapper:hover{
        background: url("../images/dropdown-hover.png") no-repeat right center;
        border-color: #239fdb;
    }
    .select-wrapper .holder{
        display: block;
        margin: 0 35px 0 5px;
        white-space: nowrap;          
        overflow: hidden;
        cursor: pointer;
        position: relative;
        z-index: -1;
    }
    .select-wrapper select{
        margin: 0;
        position: absolute;
        z-index: 2;          
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS hacks for older browsers */
        _noFocusLine: expression(this.hideFocus=true);
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".custom-select").each(function(){
            $(this).wrap("<span class='select-wrapper'></span>");
            $(this).after("<span class='holder'></span>");
        });
        $(".custom-select").change(function(){
            var selectedOption = $(this).find(":selected").text();
            $(this).next(".holder").text(selectedOption);
        }).trigger('change');
    })
</script>
</head>
<body>
        <select class="custom-select" name="timepass">
            <option>Select</option>
            <option>Web</option>
            <option>Internet</option>
            <option>Blog</option>
            <option>PHP</option>
            <option>CSS</option>
            <option>jQuery</option>              
        </select>
</body>
</html>                
Tulisan warna merah merupakan gambar panah select box dan dapat disuaikan dengan selera masing-masing.
Sumber : [tutorialrepublic]