Bold text in a drop down menu for a form

[Bohak]

I built an order form with drop down menus for visitors to select products from, and would like to make the specials in the drop down bold

Is this possible?

[ADAM Web Design]

It is, using CSS. Put the following in your style sheet:

.special {
   font-weight:  bold;
}

Then, for each special you have, do the following:

<option class="special">Special Sale</option>

And you should be good to go from there.

[Bohak]

I tried that and it didnt seem to work. So I highlighted the text of the specials and selected "special" in my CSS panel and it "bolded" all the products in the entire drop down.

I only want the specials to be bold.

Thanks for tryin.


<select name="Product" id="select4">
<option value="(click here to select the quantity)">(click here to select the quantity)</option>
<option value="$39.95 Weight Loss Supplements (1 bottle = 60 capsules) ">Weight Loss Supplements (1 bottle = 60 capsules) $39.95</option>
<option value="$44.95 Weight Loss Supplements (2 bottles = 120 capsules) ">Weight Loss Supplements (2 bottles = 120 capsules) $44.95</option>
<option value="$64.90 Weight Loss Supplements (3 bottles = 180 capsules) ">Weight Loss Supplements (3 bottles = 180 capsules) $64.90</option>
<option value="$49.90 Weight Loss Supplements SPECIAL OFFER (2 bottles of Weight Loss Supplements + 1 free bottle of HGH capsules) ">Weight Loss Supplements SPECIAL OFFER (2 bottles of Weight Loss Supplements + 1 free bottle of HGH capsules) $49.90</option>
<option value="$44.95 Weight Loss Supplements SPECIAL OFFER (Buy 2 get one free) "class="special">Weight Loss Supplements SPECIAL OFFER (Buy 2 get one free) $44.95</option>
</select>

[ADAM Web Design]

Well I'll be damned. I just assumed it would work since foreground/background colours do. Evidently, they never included that an option.

But I did come up with an alternative that may work for you:

http://www.adamwebdesign.ca/demos/option_css.html

It's not bold per se, but at least it stands out. (Adjust the colours accordingly.)

[paulhiles]

There's a promising looking tutorial here "Styling Dropdown Lists"

See the second example on the page.

Hope that helps!

Paul

[ADAM Web Design]

heh :) Hey Paul, did you look at the result dropdown for that tut vs. the one in my demo? They look kind of similar. :)

The tut's probably the better link though. It explains things in a little more detail.

FYI to Bohak: the tut won't tell you this, and I didn't per se in my demo, but you can't control font styles within option tags; you can only do so within the select tag itself (this is something I figured out by trying all the ones I knew about.)

The only thing you can do is control the background/foreground effects.

[Bohak]

Thanks Adam,
Thanks Paul,

I read and used both tutorials and it worked well. I am surprised that there is not a way to bold individual text within a drop down, could have sworn I saw it somewhere.