Styling a Select Box In WordPress Using jQuery

In a recent project that I did, one of the tasks was to display a select box (combo box) that shows items from a WordPress custom menu and styled to match the website’s overall look and that it looks the same in all major browsers.

Screenshots of output:

closed state:

open state:

Populating list box with custom menu items

I used Dropdown Menus plugin for this. This plugin adds a widget from which custom menu can be selected.

Styling the select box

From my research I realized that select boxes will be drawn by a combo of OS and browser and it is not possible to style them to have a consistent look in all browsers with just CSS alone. We have to therefore rely on jQuery (JavaScript). There seems to be at least 4 jQuery solutions for this. I have selected SelectBoxIt. The others are JavaScript image combobox, Chosen and Uniform.

I followed the instructions on SelectBoxIt’s homepage and put together a HTML file having the styled select box. If you are interested, it can be downloaded from here: Styled Select Box using jQuery static HTML page (923)

The next thing was to get this running in WordPress.

Here is the code I added to child theme’s functions.php:

// Let's hook in our function with the javascript files with the wp_enqueue_scripts hook
add_action( 'wp_enqueue_scripts', 'load_my_files' );
// Register javascript file(s) and enqueue where needed
function load_my_files() {
wp_register_style( 'prefix-style', '' );
wp_enqueue_style( 'prefix-style' );
// wp_deregister_script('jquery');
// wp_register_script('jquery', (''), false);
// wp_enqueue_script('jquery');
// Uncomment the above 3 lines only if needed.
wp_register_script( 'my-jui', '', array('jquery'), '1.0', false );
wp_register_script( 'my-jsbi', '', array('my-jui'), '1.0', false );
add_action( 'print_head_scripts', 'my_header_script' );
// Add jQuery to head
function my_header_script() { ?>
<script type="text/javascript">
//Executes your code when the DOM is ready.  Acts the same as $(document).ready().
$(function() {
//Calls the selectBoxIt method on your HTML select box
var selectBox = $("select#menu-locations").selectBoxIt({
showEffect: "fadeIn",
showEffectSpeed: 600,
hideEffect: "fadeOut",
hideEffectSpeed: 600
<?php }

I had to make a few changes (as compared the one in static HTML page) in jquery.selectBoxIt.css.

These are some of the things to note in jquery.selectBoxIt.css:

  • .selectboxit – Set the height to that of list box’s (in closed state) height. Set the background to your desired image of the list box in closed state.
  • .selectboxit, .selectboxit-options – Set the width to that of the list box’s closed state background image.
  • ul.selectboxit-options – Set the background of the dropdown here. Set “list-style-image” to “none” to get rid of bullet images (if coming from child theme’s style.css) for the list items in IE 7.
  • .selectboxit-options li a – This selector and a few others won’t be present by default. I have added them. This particular one is needed because we want the hover to work for the full width of list item and not just the hyperlinked list item text.
  • .selectboxit-options li a:hover – Set background and text color of list items on hover.

Hope this has been helpful and will save some time and research for anyone that is looking to do the same. Let me know if you have any questions.


  1. Hey Sridhar,

    Good work!. I’m glad that you like SelectBoxIt. Keep in mind that the current version of SelectBoxIt is now 1.6.0 and that SelectBoxIt now supports Mobile and Tablet Devices, so go grab the the latest copy!