: Applying a CSS style to drop-down list 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

@Eichhorn148

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>.

Vote Up Vote Down

@Megan663

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.

Vote Up Vote Down