Home arrow Style Sheets arrow An Easy Way to Build Replacement Combo Boxes

An Easy Way to Build Replacement Combo Boxes

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.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
April 09, 2007
  1. · An Easy Way to Build Replacement Combo Boxes
  2. · Adding Some CSS
  3. · Styling the Text Input Field
  4. · Adding JavaScript

print this article

An Easy Way to Build Replacement Combo Boxes
(Page 1 of 4 )

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">
<title>Replacement Combo Boxes</title>
<link rel="stylesheet" type="text/css" href="combo.css">
<script type="text/javascript" src="combo.js">
<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>

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.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials