How to style drop down select box using jQuery and CSS.

Posted in by Nazrul Islam . Filed in Web Design


Drop down select box shows different appearance in different browser. Previously custom design could be made by browser specific CSS prefix code -moz-appearance: none;  and -webkit-appearance: none; Unfortunately due to a Firefox bug recently -moz-appearance: none; is not working any more.

As a result you’ll get default ugly select box in Mozilla Firefox.  In this tutorial we will learn how to fix this problem with CSS and jQuery. Let’s start from scratch, basic HTML markup should looks similar to this.

Warp every select box in a div so we can style these div easily with CSS. Change the markup similar to this.

Instead of select box, style the container div matching your design and set opacity:0 to the select box. It will hide the select box but option box remain unaffected.  CSS styling is here.

Now hook jQuery into your HTML and write this code in a <script> tag.

This will append a span tag contains the same text of your hidden select box text, I’ll explain later how this work. Now style the span tag in your CSS file like this.

Previously we set our container div to position relative and span tag to absolute position, because select box it still there, only opacity:0 in CSS makes it invisible. Based on your CSS styling you’ll get a drop down to similar this picture.

Form Select styling

If you’re unfamiliar with jQuery, just copy and paste these code and change CSS styling matching to your own design. If you’ve little understanding with jQuery lets explain how this code work.

We’ve started with jQuery DOM ready function to ensure the code execution after document is fully loaded. All code places inside the DOM ready function curly braces. Then we grab all our container div using simple CSS selector $(‘.dropdown_menu’)  and execute jQuery  each() method which refers a function for inserting a span tag into container div. We target every corresponding container by $(this) and insert span with prepend() method. It creates the span tag as very first children of container div.  Span tag contains a dynamic text of select box’s default load text, which is stored in a variable named baseData . For storing value in baseData we search container div’s select box by find() method and pass a CSS pseudo selector select option:selected as a parameter. After targeting the select box we use .html() method for grabbing text.

The second part of the script start with targeting the select box itself. Then attach an event handler with .change()  to detecting select box option changing.  If user change an option we replace the span tag’s text with selected option text. Process is pretty similar to previous step. When a Option is selected it become the first item in select box, we detect it’s value attribute by val()   method and store in a variable named nodeOne.  Another variable currentNode passes nodeOne inside a pseudo selector find(“option[value='”+ nodeOne +”‘]”) for grabbing its text with text() method.  Finally go to select box parents div with parents(“.dropdown_menu”) and replace its span tag’s text by passing the currentNode as a parameter in text() method.  That’s all, actually this script could be written in many ways using various jQuery selector.  This technique is applicable from IE9+ , if you need to support older browser you will need to add additional CSS Opacity fallback prefix.


Tags:


0 comments

Trackbacks

  1. […] jQuery and change its value dynamically if user change drop down value. Total demonstration shown in this tutorial with code explanation. Hope it will solve your […]

  2. […] jQuery and change its value dynamically if user change drop down value. Total demonstration shown in this tutorial with code explanation. Hope it will solve your […]

  3. […] jQuery and change its value dynamically if user change drop down value. Total demonstration shown in this tutorial with code explanation. Hope it will solve your […]