How to create custom select box in HTML using CSS and jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: 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 we will only customize the dropdown arrow part and leave the rest of the thing as it is, because we also have to put these select boxes into real use so we have to keep other things in mind. This solution is easy to implement in any project and highly compatible across browser even works great on 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 customize select box.

The HTML Code

Create select box like you do in regular HTML using the <select> tag and place it anywhere, but do not forget add the class .custom-select to the select boxes, because this solution depends on the .custom-select class to track all the select boxes in a document that should be customized and leave the others to be displayed as default.

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

The CSS Code

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. As CSS opacity property doesn't work in Internet Explorer 8 and lower, but don't worry we have placed some CSS hacks to deal with the older browsers including Internet Explorer 7 and 8.

  • <style type="text/css">
  •     .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 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>

The jQuery Code

This jQuery code 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. Don't forget to include the jQuery in your document before this 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>
 

Tip:If JavaScript is disabled, normal select box will appear instead of customized select box. So it will not break your code in any way.


Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.