Format Dropdown menu using CSS

[stevesimo]

Hi, I am attempting to make a simple font selector for users to select the font they wish to use for creating an advert.

 

What I am attempting to do is format the individual elements in the select menu using the appropriate font family setting. So for example the option Arial Black will be displayed using the css style="font-family: 'Arial Black', sans-serif"

 

I have place the style tags inside the option tags for the dropdown although this is not working. If I place the css in the header of the dropdown it works but will format every option in the dropdown with the same font.

 

Here is the code for my dropdown:

 

<select name="select" style="font-size:10px">
<option value="0" selected>Select font</option>
<option value="1" style="font-family: Arial">Arial</option>
<option value="2" style="font-family: 'Arial Black'">Arial Black</option>
<option value="3" style="font-family:'Comic Sans MS'">Comic Sans MS</option>
<option value="4" style="font-family: 'Courier New'">Courier New</option>
<option value="11" style="font-family: 'Times New Roman'">Times New Roman</option>
</select>

[code] 

Can anyone tell me what I am doing wrong or it simply something which can't be done?

Thanks

Steve

[/code]

[ypkumar]

If you are trying to achieve a on-the-fly text formatting (like the one vbulletin forum uses), then im afraid that its not possible using css.

the trick to achieve it is not only trough CSS but also uses PHP and AJAX.

 

you can alternatively use 3rd party javascript resources to achieve this. (eg TinyMCE or FCKeditor)

hope this helps.

 

with best regards,

kumar.