How to Create Custom select dropdown arrow with jQuery

Thanks to HTML5 that gives us lot of new tags that can make our life easy and we can easily creates beautiful websites with contact forms and pages. But sometime we are in situation to change or customize default behavior to make it more pretty or as per client requirement. I have been in same situation  few weeks ago when I have to customize the default arrow of <select> tag dropdown.

After lot of search I came with some CSS solutions but that have many cross browsers issues, specially when we name IE9  or 10. CSS solution is easy to apply but as I said it have drawback and there are a few catches (the dropdown box will be wider than the select window but if that’s not an issue then this should best solution for now.

But here I am not going in detail about custom dropdown arrow with CSS instead I will give you idea how to customize dropdown arrow through jQuery.  We will use a plugin name jQuery Selectbox plugin

Select-box plugin preview
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Select-box plugin preview

jQuery Selectbox plugin replace browser built-in select box form element with fancy high customizable one and we can customize it further according to our needs and mockup.

How to Install the plugin?

Installation or usage of plugin is very easy. just follow the steps below and you can install this plugin in Static HTML site or in WordPress Dynamic website. For this article I have used wordpress to customize the Archive Dropdown Widget and Categories Dropdown Widget and applied my custom design.

Include this between <head></head>(or download) on your server and include.
HTML code for dropdown:
Selectbox javascript call this into footer or body tag anywhere:

There is a demo by the author that you can view before applying it on your site. Check the demo

How to customize WordPress Archive & Categories widget drop-down arrow?

In this tutorial I have selected Canvas theme by Woothemes and make sure you are working in child-theme. If you don’t know how to create child-theme then please read wordpress codex or Themify detailed article.

First open header.php file through FTP in canvas child-theme or if you have some other child-theme.

Child Theme View In Ftp
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Child Theme View In Ftp

If its not existed copy header.php file from theme directory to child-theme directory and open it

Header.php edit view in sublime
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Header.php edit view in sublime

and copy paste this code before </head> tag

You can also copy all CSS from source link to child-theme style.css as well and in that case you don’t need to include it in header.

After that Add this code in footer.php in child-theme directory and same if its not existed please copy/paste it from theme directory.

Footer.php Edit View In Sublime
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Footer.php Edit View In Sublime

Source code:

Now you can add some custom css in style.css of child-theme to design <style> dropdown as you need.

Don’t forget to change the image source to work in properly.  After that Go to WordPress Admin > Appearance > Widgets and add Archives and Categories widgets to your required sidebar area according to your need.

Archives custom drop-down arrow and design
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Archives custom drop-down arrow and design

Categories custom drop-down arrow and design
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Categories custom drop-down arrow and design

Select dropdown check-box for both widgets and view them on your website front-end.

custom select drop-down style in WordPress
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

custom select drop-down style in WordPress

Categories custom drop-down arrow and design
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Categories custom drop-down arrow and design

Archives custom drop-down arrow and design
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Archives custom drop-down arrow and design

You can see that drop-down style is customized as well as arrow is also changed with our custom arrow image. It should work IE9+ and all latest browsers.  Again visit this demo before applying it so you can play with it and read more features. This plugin support few properties and events as well. Sky is the limit. Let us know which solution you have applied or if you have some new method for this. suggestions and comments are always welcome. Keep visiting us back for new tips and tutorials.

Web consultant and Web Designer with over 7 years of professional and creative experience. Jamil is passionate about creating modern and user friendly websites that help businesses attract more customers and increase sales. He received bachelor and master in Business Administration and also co-founder of www.prepareddevelopment.com

Pin It on Pinterest

Share This