An Easy Way to Build Replacement Combo Boxes

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;
}