How to set font in Select Options

[philcha]

I'd like to display a list of font options so that each option gives an example of the font, the way MS Word does - the "Times New Roman" option appears in Times New Roman, the "Tahoma" option appears in Tahoma, etc.

Accordng to my manuals, the OPTION tag allows inline styles. So I coded:
<select name=&quot;selFont&quot; size=1>
<option style=&quot;font-family: 'Times New Roman'&quot; value=&quot;Times New Roman&quot;>Times New Roman
<option style=&quot;font-family: 'Helvetica'&quot; value=&quot;Helvetica&quot; selected>Helvetica
<option style=&quot;font-family: 'Tahoma'&quot; value=&quot;Tahoma&quot;>Tahoma
<option style=&quot;font-family: 'Arial'&quot; value=&quot;Arial&quot;>Arial
etc.
</select>

But this has no effect in IE 5 or Netscape 4 - the options appear in the browsers' default fonts.

Have I done something wrong, or do the big 2 browsers not support this use of styles yet?

 

[zefir]

Without styles it´s easy.
E.g. for tables add in each table cell
or in advance to any text at any location:
< Font Face = &quot;Arial,Helvetica,SansSerif&quot; >
Win PC will use Arial, Mac Helvetica,
Unix the default SansSerif.
This direct tag works with IE and NC.
It overrides the Browser´s default.
I don´t know how to combine it with styles.
---G.Hoffmann

 

[philcha]

zefir,

Thanks for trying, but OPTION tags seem to be peculiarly resistant to manipulation of their appearance.
I followed up your suggestion by trying
<option value=&quot;Comic Sans MS&quot;><font face=&quot;Comic Sans MS&quot;>Comic Sans MS</font>
and got the browser's default font.

Any other ideas specifically for OPTIONs within SELECT?

 

[secretsquirrel]

Try writing a seperate stylesheet, or a style tag in the head of your document, like this:

<STYLE TYPE=&quot;text/css&quot;>
.style1 { font-family: Verdana; font-size: 14px }
.style2 { font-family: Arial; font-size: 14px }
.style3 { font-family: Comic Sans MS; font-size: 14px }
</STYLE>

and then refer to them like this:

<select name=&quot;fonts&quot;>
<option class=&quot;style1&quot;>Verdana</option>
<option class=&quot;style2&quot;>Arial</option>
<option class=&quot;style3&quot;>Comic Sans MS</option>
</select>

This works OK for me.

 

[tsdragon]

philcha is correct, options and select (drop down) lists are particularly resistant to manipulation of their styles. There are some things that DO work, but many that don't.
Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[aperfectcircle]

This will work fine in Netscape 6, but I haven't had any luck with it in IE...