Forum Moderators: open

Message Too Old, No Replies

How to get bolded text in drop down box?

It won't show up

         

Lorel

11:48 pm on Feb 7, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm working on a shopping cart search. Search is working however my formatting of the search box isn't.

I have a form set up with category and sub category options that appear in a drop down box. I have formatted the Categories so they are bold so they can easily be discerned from the sub categories but when I load the page they aren't bolded.

Here is the code:

<select name="filter_cat">
<option value="">&lt; Select Category and Sub Category &gt;</option>
<option value="11"><b>Widget</b></option>
<option value="12">blue widget</option>
<option value="13">green widget</option>
<option value="14">yellow widgets</option>
</select>

#11 is the category and others are sub categories. #11 should be in bold.

Can anyone tell me why it doesn't show up as bold in the drop down box? Is there something else I need to do?

eelixduppy

11:52 pm on Feb 7, 2007 (gmt 0)



This should work :)

<option value="11" style="font-weight: bold">Widget</option>

You can even make it look even better! (not to say that the following 'looks' better; just giving you ideas ;))


<select name="filter_cat">
<option value="">&lt; Select Category and Sub Category &gt;</option>
<option value="11" style="font-weight: bold; border-bottom: 1px solid gray;">Widget</option>
<option value="12" class="subcat">blue widget</option>
<option value="13" class="subcat">green widget</option>
<option value="14" class="subcat">yellow widgets</option>
</select>
</form>

And the subcat class is then something like this:


.subcat {
text-indent: 5px;
background-color: #C1CDCD;
color: #000000;
}

I dunno...Just giving you ideas

kaled

1:14 am on Feb 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I believe <select> is essentially a plain text control like <textarea>. Some browsers (maybe all) could support styles within <select> controls, but it would be best to check all the majors (FF, IE, Opera) before doing a lot of coding.

Kaled.

eelixduppy

1:19 am on Feb 8, 2007 (gmt 0)



kaled, you are correct that it doesn't work with everything.

The code above works as intended for FF, but in IE the bolding style does not work, only the indent and the background color.