Styling select boxes is notoriously difficult. They offer only a few elements that can be styled and these are very inconsistent between browsers. To start with, it’s usually best to leave form elements close to their browser defaults for usability reasons. Users are familiar with the basic form elements and there are built in usability features such as keyboard control that make it easy to use the elements without a mouse for example.

However, there are situations where you want your forms to be a little more fancy. In these cases, the solution is to use JavaScript to hide the default form element and replace it with a styled version using substitute markup such as an unordered list. Enter Chosen by Harvest. This little plug-in will take a standard list box with a single class and make it awesome. Read more »