An Easy Way to Build Replacement Combo Boxes
(Page 1 of 4 )
HTML forms offer certain challenges to the web designer. One of them is achieving a consistent style; not all elements are consistently styled across all browsers, and as a result you're faced with the possibility of losing some functionality if you choose not to use those elements. This article, the first of two parts, shows you how to use a single line text input field to recreate the functionality of select elements in a way that works across IE and FireFox.
As every web designer knows, styling HTML forms can be tricky at best, with some elements happily being styled by standard CSS and others, like the select element, refusing to be consistently styled across browsers. While FireFox does render select boxes with the CSS rules you specify, IE fails to implement all but a few of the rules.
One way to get around this is to not use select elements at all. You don't need to worry about styling what isn't on the page. The downside of this is that you lose out on their unique functionality. I'm going to show you how easy it is to recreate that functionality using a form element that can be styled on all browsers -- the humble single line text input field.
There are two ways to achieve the desired outcome, the easy way for smaller combo boxes with a small number of options, or a more complex method for dealing with many options. This article will focus on the easy method.
To start with, create the following basic HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Replacement Combo Boxes</title>
<link rel="stylesheet" type="text/css" href="combo.css">
<script type="text/javascript" src="combo.js">
</script>
</head>
<body onload="init()">
<h1>Replacement Combo Boxes</h1>
<form action="">
Make a selection: <input class="combo" type="text" id="combofield" readonly="readonly"><img class="arrow" src="drop-down.gif" alt="Click to open combo box" onclick="showOptions()">
<div id="combodiv">
<a class="option" href="#" onclick="setOption('Option1')">Option 1</a>
<a class="option" href="#" onclick="setOption('Option2')">Option 2</a>
<a class="option" href="#" onclick="setOption('Option3')">Option 3</a>
<a class="option" href="#" onclick="setOption('Option4')">Option 4</a>
<a class="option" href="#" onclick="setOption('Option5')">Option 5</a>
<a class="option" href="#" onclick="setOption('Option6')">Option 6</a>
<a class="option" href="#" onclick="setOption('Option7')">Option 7</a>
<a class="option" href="#" onclick="setOption('Option8')">Option 8</a>
<a class="option" href="#" onclick="setOption('Option9')">Option 9</a>
<a class="option" href="#" onclick="setOption('Option10')">Option 10</a>
</div>
</form>
</body>
</html>
So we have a basic form element holding a standard text input box which can be styled, followed by a nested div element holding what will become the options in the replacement combo box. As you can see, I've used an image to represent the arrow used to expand the combo box, which allows you to really style the combo box in conjunction with the rest of your site.
One final point to note is that the text box itself has been made read-only. The reason for this is that we want visitors to use the options provided rather than typing their own response. Another option would be to use the disabled="disabled" attribute, however, the contents of disabled text input fields are not submitted with the form, rendering them useless in this situation. Read-only text fields are also easier to style consistently across browsers.
Next: Adding Some CSS >>
More Style Sheets Articles
More By Dan Wellman
