Change css font-family for separate options in select tag

问题:

I don't know if this is possible, and if not, if someone can throw out optional ideas, but I'm attempting to display a drop down of different fonts (specifically, font's from Google's font directory) in a select tag. In the drop down, I'm trying to show a preview by styling each option with the font it represents

Tangerine

This doesn't seem to be working, though. Any clues why or how to fix it?

回答1:

You should wrap each option tag in an optgroup tag and then style that as:

Arialverandaother

回答2:

You cannot set the font of the tag but you could create a list with specific styles (as you would expect)

Here's everything I've been trying:

$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine"); $("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma"); $("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");

h1 {   font-size: 1.2em;   margin-top: 10px;   color: #777; } .tangerine {   font-family: tangerine; } .tahoma {   font-family: tahoma; } .timesnewroman {   font-family: times new roman; }

 
Set with jQuery TangerineTahomaTimes New Roman
 
 
Set with CSS TangerineTahomaTimes New Roman
 
 
List 
Tangerine
     
Tahoma
     
Times New Roman
 

回答3:

Maybe you can use javascript? Can you try this ?

  
You can simply use like this
  
ArialArial
     

回答5:

I used a hackish-style method to do it.

Because I needed to style the select tag and wanted to customize a couple more things, I used the Stylish Select plugin for jQuery and attached the font-family css attribute to the parent element (which was a list tag).

That worked with little code and was cross-browser compatible.

回答6:

Give the font name to option value. Then you can set them all with jquery.

Here is an example:

You can add new font easily like this:

My Font Name

$("#selectfont").each(function(){   $(this).children("option").each(function(){     $(this).css("fontFamily",this.value);   }); });

 TangerineTahomaTimes New Roman

回答7:

All options mentioned above didnt display thing correct on OSX Safari. I managed to get things correct by using bootstrap:

               
     Kies een lettertype          
Arial
     
     
Times
     
Verdana
     
Helvetica
     
Edwardian
     
                                

文章来源: Change css font-family for separate options in select tag