So You Want Fancy Drop Boxes, Huh?

Use these to jump around or read it all…

[Three Examples]
[How It’s Done]

Every now and again I run into an effect that I should have known about all the time. It’s usually so easy that I’m stunned I think of it. This short tutorial is just such an example.

I was surfing around sites attempting to gather information about a vacation destination when I ran into a site put up by one of the hotels. The site is filled with drop down boxes. They were just simple drop boxes except the author took the time to add one extra bit of help. He or she highlighted every other choice so I could easily tell them apart while looking at the numerous choices.

I thought it was a simple, brilliant move. Here’s how it was done.

---

Three Examples

Try these on for size mister!

This is how the hotel did it. It’s a simple highlight of every other one:

This is Option Number One This is Option Number Two This is Option Number Three This is Option Number Four This is Option Number Five This is Option Number Six This is Option Number Seven

This is the same highlight except the text is what is highlighted:

This is Option Number One This is Option Number Two This is Option Number Three This is Option Number Four This is Option Number Five This is Option Number Six This is Option Number Seven

Finally here’s one I like, a reversal of color. Now the text is white and the background is black.

This is Option Number One This is Option Number Two This is Option Number Three This is Option Number Four This is Option Number Five This is Option Number Six This is Option Number Seven

OK, so my color choices weren’t very good, but I think you can see the good in all of this. I thought it looked great when I first saw it. Let’s take a look at how it’s done. You’ll hate it that it’s so easy.

---

How It’s Done

In order to get the effect, you’ll need to understand a little bit about Cascading Style Sheets and Classes. The process is this, you set up a class of style sheets, assign a name to it and then call on that name when you want the effect. Here’s all the code from the three boxes above plus the Style Sheet block I use to get the effect. I’ve bolded where I call for the class.

<STYLE TYPE=”text/css”>
.highlight {background:#ff00ff}
.text {color:#ff00ff}
.both {color:white;background:black}
</STYLE>

<FORM>
<SELECT>
<OPTION SELECTED> This is Option Number One
<OPTION CLASS=”highlight”> This is Option Number Two
<OPTION> This is Option Number Three
<OPTION CLASS=”highlight”> This is Option Number Four
<OPTION> This is Option Number Five
<OPTION CLASS=”highlight”> This is Option Number Six
<OPTION> This is Option Number Seven
</SELECT>
</FORM>

<FORM>
<SELECT>
<OPTION SELECTED> This is Option Number One
<OPTION CLASS=”text”> This is Option Number Two
<OPTION> This is Option Number Three
<OPTION CLASS=”text”> This is Option Number Four
<OPTION> This is Option Number Five
<OPTION CLASS=”text”> This is Option Number Six
<OPTION> This is Option Number Seven
</SELECT>
</FORM>

<FORM>
<SELECT>
<OPTION SELECTED> This is Option Number One
<OPTION CLASS=”both”> This is Option Number Two
<OPTION> This is Option Number Three
<OPTION CLASS=”both”> This is Option Number Four
<OPTION> This is Option Number Five
<OPTION CLASS=”both”> This is Option Number Six
<OPTION> This is Option Number Seven
</SELECT>
</FORM>

You create the class in the Style Sheet block with the leading dot. Here’s the first one from the block up above.

.highlight {background:#ff00ff}

This is set to just add a background highlight. Notice I have the color set to a violet. Now here’s how it’s called for in the drop box.

<OPTION CLASS=”highlight”> This is Option Number Two

Get it? When you want it, call on it. Take a look at the code above and you’ll see each of the three classes and
how I called for them in the Form code.

Great effect. No sweat.

 
Enjoy!

[Three Examples]
[How It’s Done]

[HTML Goodies Domain]