I have a PHP function to display all my custom taxonomies in a drop-down list, but I don't like the drop down menu style. I want to change the look of it. How can I customize its look?


The default drop down menus in HTML are handled by <select> tags. Here is a good article that shows how to style <select> tags.

The article states that most parts are easy to style the same way that other HTML elements are styled. It is easy to change the font, size, margins, background, color, etc. The one element that is difficult to style in a cross-browser compatible way is down arrow that invites the user to use the drop down menu.

To style that, you have to use some trickery:

  • Surround the <select> with a <div>.
  • Set the background of the <select> to "transparent".
  • Use an image of your own arrow as the background for the surrounding <div>.
| improve this answer | |

Well, this isn't something easily answered in this context. Essentially, you will need to get the CSS ID and Classes from your menu's HTML and cross-reference that with the CSS.

In the CSS, you can then do anything you like to the represented ID and Classes to customize the looks. Obviously, there are many pitfalls, so take a backup before you start to play around.

Alternatively, you may just like to use a ready-made solution, in which case you can take a look at CSS Menus or CSS Play for some good ideas.

| improve this answer | |
  • i have my entire dropdown, in my functions.php file, i found this code from wordpress.stack you can check the code over here wordpress.stackexchange.com/questions/4878/… so can i do formatting to my drop-down list? – Niraj Chauhan Dec 4 '10 at 13:43
  • The solution generously provided by MikeSchinkel is a PHP function, hence it is in the functions.php file for Wordpress. The function, when run, still outputs to HTML that you can view by selecting "view source" from most browsers. That HTML can then be styled by using CSS, just like any other part of a webpage. I'll have to refer you to W3schools if you have more specific CSS questions. – Paul Dec 4 '10 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.