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
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:
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.
If its not existed copy header.php file from theme directory to child-theme directory and open it
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.
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.
Select dropdown check-box for both widgets and view them on your website front-end.
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.