Modifying font parameters in an option tag 2

[awingnut]

Is there a way to set fonts for different entries in pulldown lists? Specifically, I want the first item in the list to be a different color and size from the rest of the items in the list. I tried this:

<option value=&quot;General/directory.pdf&quot;><font color=&quot;#0000ff&quot; size=&quot;+1&quot;>Directory</font></option>

but it seems the browser ignores tags within an <option> tag. TIA.

 

[Vragabond]

Use CSS for that:

<select style=&quot;font-size: 12pt; font-weight: bold; color: yellow;&quot;>
 <option style=&quot;color: #0000ff;&quot;>selection 1</option>
 <option style=&quot;color: red;&quot;>selection 2</option>
 <option>selection 3</option>
</select>

This will set all the font sizes in the select box to 12pt and the color of the first selection will be blue, the second red. Note that you cannot set the size of individual options, only the select box as a whole. If you want to apply the same text color to the whole box, move it to the select tag. I have applied yellow text color to select box, this means every option will appear yellow (selection 3) unless specified differently in the option tag (selections 1 and 2).

Hope it helps

 

[awingnut]

Yes, it does help. Thanks. I need to play with it more to get what I want but one more question. Can I also set the color of the font on the mouseover? My blue shows up as black (which is the same as the others) when the mouse is on it, until the mouse moves to another selection.

 

[awingnut]

This is odd. When I put the 'style' in the <select> tag directly, it works fine. When I try to put it in a style sheet it seems to be ignored. I'll play with it more but in the mean time, any ideas? TIA.

 

[Vragabond]

Hmmm, could you post how you did it with the external style sheet? That would help spot the problem.

As for the 'onmouseover' question, as far as I know, you can't change that property. To change it you would have to construct a whole new select box in javascript. For that you'll need to post in the javascript forum.

 

[awingnut]

Thanks. Here's the style sheet contents:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	background-image: url(../Images/TILE007.gif);
}
select {
	style: "font-size: 12pt; color: blue;"
}
option {
	style: "color: black;"
}

 

[Vragabond]

You don't need to put 'style:' in the style-sheet. Correct your style sheet in this way:

select {
    font-size: 12pt;
    color: blue;
}
option {
    color: black;
}

Also note that no option here will be colored blue, since you define all options black. If you want to apply certain formatting to an option or group of options you can do it like this:

.myoption {
    color: black;
}

And call this in your html like this:
<option class=&quot;myoption&quot;>option 1</option>

Any option you wish to be written in black you assign this class.

 

[awingnut]

Thanks, it works now. I don't need the .myoption because I override it, in the one place I need it, directly in the <option> tag.