[RESOLVED] Formatting select box items

ncracraf

Is it possible to format (i.e., apply tags) items in a select box? I would like to make some of the items bold based on their values.

I tried the following with no success:

<select name="select">
  <option selected="selected"><b>Northeast</b></option>
  <option value="1"> -- Boston</option>
  <option value="2"> -- New York</option>
  <option value="3"> -- Providence</option>
  <option><strong>Midwest</strong></option>
  <option value="4"> -- Indianapolis</option>
  <option value="5">-- Chicago</option>
</select>

You'll notice I'm doing a poor-person's version of a chained selector. I actually have the chained selector code working but am not too happy with the amount of code it takes to #1 Make it run and #2 Select the options that were previously selected when returning to the page.

Thanks in advance for any help.

Nathan

bpat1434

Well, you could use

<optgroup title="Midwest">
  <option value="1" style="background-color: #ccc; color: #000;">Option</option>
</optgroup>

Don't think you can change the individual font weights, but you can change the font colors and background-colors...

~Brett

Rodney_H_

edit: Works in Mozilla-based browsers only

You can use css classes:

<head>
<style type="text/css">
.bold { font-weight:bold;background-color:#ccc;}
</style>
</head>
<body>
<form>
<select name="select">
<option selected="selected" class="bold">Northeast</option>
<option value="1"> -- Boston</option>
<option value="2"> -- New York</option>
<option value="3"> -- Providence</option>  

<option class="bold">Midwest</option>  

<option value="4"> -- Indianapolis</option>  

<option value="5">-- Chicago</option>
<option class="bold">Southwest</option>  

<option value="6"> -- Tucson</option>
<option class="bold">Northwest</option>  

<option value="7"> -- Seattle</option>
</select>

bpat1434

Actually, you can't.... sorry, but that doesn't work...

~Brett

Rodney_H_

Well you are right. It doesn't work in IE. I only tested it in Firefox and Netscape... otherwise I wouldn't have suggested it. Probably a good compromise would be to do font-weight and background color as you suggested to be compatible cross-browsers...

Good call, Brett.

ncracraf

Thanks guys, you showed me what I needed to know. I wasn't necessarily concerned with having the headers bold as much as simply calling them out visually.

The approach...

<option selected="selected" style="background-color: #ccc; color: #000;">Northeast</option>

...works like a charm. Thanks again.

Nathan