Style Sheets
  Home arrow Style Sheets arrow Page 2 - 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  
Mobile Linux 
App Generation ROI 
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 / 4
    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


    An Easy Way to Build Replacement Combo Boxes - Adding Some CSS


    (Page 2 of 4 )

    Let's add some CSS now to get it looking like a combo box. In a new file in your text editor, add the following code:

    .arrow {
      
    height:20px;
     
    border-style:solid;
     
    border-width:1px 1px 1px 1px;
     
    border-color:blue;
     
    margin:0px;
     
    padding:0px;
     
    vertical-align:bottom;
    }

    This selector targets the drop-down arrow image and ensures that it is the correct size and has no margins or padding. Although I haven't done so in this example, you could easily use CSS to specify a second arrow image that could be used as a rollover, just to reinforce to visitors that it will do something when clicked. I think however that the functionality of combo boxes has been around long enough to be ingrained in the mind of pretty much any visitor, so they should assume that it will work in the same way as a standard combo box. Most visitors hopefully will not even have to think about it and will just assume it is an actual combo box, which is after all the intention behind the article.

    Due to an inconsistency between IE and Firefox, the current code will line up the image correctly in FireFox, placing the image next to and inline with the text field. In IE however, the image is offset slightly. It's only a minor problem, but it does have an impact on how the page is viewed so should be corrected. We can do this with the following hack that targets IE 6 only:

    * html body img.arrow {
     
    position:relative;
     
    top:-1px;
    }

    This is a well established hack for targeting IE 6 only with additional rules, sometimes referred to as the star hack. Whatever it's called, it works well in situations like this, but only works with IE 6. IE 7 will still display the image incorrectly. There is still a way to target IE 7 though, use:

    *+ html body img.arrow {
     
    position:relative;
     
    top:-1px;
    }

    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

    - Improving the Visual Presentation of a CSS D...
    - Fixing Browser Incompatibilities in a CSS Dr...
    - Building Clean Drop-Down Menus with CSS
    - Creating Hybrid Web Page Layouts with Negati...
    - Creating Three-Column Web Page Layous with N...
    - Swapping Column Positions in Web Page Layout...
    - Creating Web Page Layouts with Negative Marg...
    - 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






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