onlinecode

create custom select box in HTML using CSS and jQuery

create custom select box in HTML using CSS and jQuery

In this post we will give you information about create custom select box in HTML using CSS and jQuery. Hear we will give you detail about create custom select box in HTML using CSS and jQueryAnd how to use it also give you demo for it if it is necessary.

Use the CSS :selected Pseudo-class with jQuery


If you try to remove the select box dropdown arrow using CSS properties like background, it will not work. This is the default behavior of select boxes, because select boxes are native part of the browsers and their visual rendering depends on the browser itself, and that’s why select boxes appears differently on different browsers like Firefox, chrome, safari, IE etc.


In this tutorial we will customize the select boxes so that it will appear consistent across the browser with the help of CSS and some sort of jQuery. Actually, here we will only customize the dropdown arrow part of the select box and leave the rest of the thing as it is, because we also have to put these select boxes into real use therefore we have to keep other things in mind.


This solution is easy to implement in any project and highly compatible across browsers even work in Internet Explorer 7. This custom select box gives your website a unique look and feel even in a simple form, however you can extend this example to create fully customized select box.


<form action="action.php" method="post">
    What Is Your Favourite Time Pass:</p>        
    <select name="timepass" >
        <option>Select</option>
        <option>Driving</option>
        <option>Internet</option>
        <option>Movie</option>
        <option>Music</option>
        <option>Sports</option>
    </select>
</form>


What we are trying to do with the CSS is hide the default select boxes with the help of CSS opacity property and show a <span> in place of them instead.


Now place the following style rules inside the head section of your HTML document.


<style>
    .select-wrapper{
        float: left;
        display: inline-block;
        border: 1px solid #d8d8d8;            
        background: url("arrow.png") no-repeat right center;
        cursor: pointer;
    }
    .select-wrapper, .select-wrapper select{
        width: 200px;
        height: 26px;
        line-height: 26px;
    }
    .select-wrapper:hover{
        background: url("arrow-hover.png") no-repeat right;
        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 adding opacity in 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>


This jQuery will track all the select boxes in the document having the class .custom-select and add some more HTML elements around the select boxes to replace the dropdown arrow with our custom dropdown image and to display the selected value.


Also, don’t forget to include the jQuery in your document before this script.


<script>
    $(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>


 

Hope this and post will helped you for implement create custom select box in HTML using CSS and jQuery. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version