• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1299
  • Last Modified:

Option Font-Family/Font-Face

Hi-
   How do you change the font-family/font-face of a simgle option? I tried putting this in the option tag:

style="font-family:Wingdings"

but that doesn't work. Neither does it work with font-face. I need this for one option, no the whole select menu. It is a multiple-select menu, if that matters.

-IceMetalPunk
0
IceMetalPunk
Asked:
IceMetalPunk
2 Solutions
 
AndyCommented:
The font-family style does not apply to options only the whole menu.
0
 
seanpowellCommented:
...that's all there is - the styling must be on the select element:
<select size="3" style="font-family:georgia;">

If you can handle a custom select box built from DHTML, then you have many more options:
http://webfx.eae.net/dhtml/select/jsGenerated.html
0
 
azcn2503Commented:
I don't think it's possible to change the font family of a single option. However, I do know that the background colour can be changed, like so:
<option style="background-color:#f00;">Red</option>
<option style="background-color:#ff0;">Yellow</option>
Maybe it will be supported in future browsers.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
COBOLdinosaurCommented:
The only options you have directly on the options are color and background-color.  The only thing you can with font is put the option in an optgroup, and then the label of the optgroup will be italics:

<option> one</option>
<option> two</option>
<optgroup label="more">
 <option> three</option>
</optgroup>
<option> etc...</option>


Cd&
0
 
Lord_McFlyCommented:
I'm not sure exactly what it is you are trying to do - I'm guessing you have a list of characters in the multi-select list and need to apply a font to see how the characters change. As mentioned above its not possible to change each option individually.

What I done in my example is have an font list above the multi-select which when you select the font changes the font style of the multi-select list so you can see how those characters would look and once a font has been selected you'll be able to use the down arrow and basically scroll and view the effect it has on your multi-select list - if you get what I mean.

Cop and paste - have a quick look...

<html>
<head>
<title>Fonts</title>
<script language="JavaScript">
<!--
function ChangeFont(Object,FormItem)
      {
            document.getElementById(FormItem).style.fontFamily=Object.options[Object.selectedIndex].value;
      }
//-->
</script>
</head>
<body>
<form name="Tags" method="post" action="Tags.htm">
      <select name="f_0" onChange="ChangeFont(this,'f_1')" style="WIDTH: 100">
            <option value="">Select Font</option>
            <option value="Verdana">Verdana</option>
            <option value="Ariall">Ariall</option>
            <option value="WebDings">WebDings</option>
      </select><br>
      <select name="f_1" multiple style="WIDTH: 100">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
      </select>
</form>
</body>
</html>
0
 
Lord_McFlyCommented:
Do you need any more assistance on this question?
0
 
Lord_McFlyCommented:
Describe a little more about what you are trying to do - maybe there is an alternative we could suggest.
0
 
Lord_McFlyCommented:
*** Misplaced comment deleted ***
0
 
Lord_McFlyCommented:
Sorry - wrong place :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now