Modern Combo Boxes

2. Create Your Combo Box

The HTML for our combo box is not hugely different from how we'd code a regular input field except that we need to code the list for our drop down immediately following the input. Here's the complete code from my example form with combo box.

The entire combo box including its label are wrapped in a div with a class of "combo". It is this class that we will use to control the styling of our combobox. If you want more than one combo box in your form just copy the entire div tag and change the label along with the name and id attributes.

Next step is to add the below CSS to style our combo box either in a style tag in the head of your page or in an external style sheet.

One thing to note is that I have applied a light green colour to both the input field and the drop down list (when it is visible) that will help you to visually distinguish the drop down lists in your form from the other input fields. If you prefer to use a different colour for this simply change the #cfc references in the CSS to the colour of your choice.

One thing to note with this CSS is that I have carefully adjusted the sizes so that the drop down list will be positioned directly under the input box and the label and input box will fit alongside each other in all the major browsers. If you adjust these sizes slightly to get a better alignment in one browser then you will get a worse alignment in another. Your feedback on how to better code the CSS for cross browser compatibility is most welcome.

The final thing to add to our HTML itself is a script tag immediately before the end of the body.

The final step is to create the actual external JavaScript to work the combo box.