HTML replacement of the select dropdown
Improving the UI of the form select dropdown is an interesting topic. For instance, except Internet Explorer, other web browsers support styling of each option in the select element. This is of great help, especially when we have to show country flag along with country name when listing countries in the selectbox. As direct styling of the option elements is not possible in Internet Explorer, one approach is to replace them with an anchored ordered/unordered list so that each list can be styled. In this recipe, we'll look into such HTML replacement.
Getting ready
We'll require the jQuery UI selectmenu plugin from https://github.com/fnagel/jquery-ui along with the jQuery UI core.
How to do it...
The HTML markup to get this done is a simple form with the select element. Note that we are going to use the jQuery UI selectmenu plugin to convert the select element to an unordered list and get the styling done through CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD...
