Style Sheets
  Home arrow Style Sheets arrow An Easy Way to Build Replacement Combo Box...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Actuate Whitepapers 
Moblin 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

An Easy Way to Build Replacement Combo Boxes
By: Dan Wellman
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 3
    2007-04-09

    Table of Contents:
  • An Easy Way to Build Replacement Combo Boxes
  • Adding Some CSS
  • Styling the Text Input Field
  • Adding JavaScript

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT

    Generate data entry and reporting .NET Web apps in minutes, straight from your database. Read our FREE whitepaper “Build Web 2.0 Applications Without Hand-Coding” Download now!

    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.

    More Style Sheets Articles
    More By Dan Wellman


       · Hello All,This article shows a very quick and easy way to implement custom...
     

    STYLE SHEETS ARTICLES

    - Creating Gradients for Individual Containers...
    - Creating Gradients for Web Page Headers with...
    - SEO Scrolling Frames Problem Solved
    - Building Cross-Browser Background Effects wi...
    - CSS: Pseudo
    - Using PNG Images to Build Background Effects
    - CSS: Continuing the Clarification of CSS Cla...
    - CSS: Top Secret Classification
    - CSS: Dimensions
    - CSS: Margins and Padding
    - CSS: Crossing the Border
    - CSS: Text, Fonts, and Tables
    - CSS: Working with Text
    - CSS: Backgrounds
    - CSS for the Newbie


    Iron Speed





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway