Change css font-family for separate options in select tag

Question

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

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

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

in case somebody is running into a similar problem: IE9 (at least) seems to ignore `font-size` settings when they are bound to the option - but will take the `font-size` when bound to the `select` itself. — low_rents, Jul 28 '14 at 07:39

score 9 · Answer 1 · edited Jan 17 '15 at 22:05

9

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

<select>

  <optgroup style="font-family:arial">
    <option>Arial</option>
  </optgroup>

  <optgroup style="font-family:verdana">
    <option>veranda</option>
  </optgroup>

  <optgroup style="font-family:other">
    <option>other</option>
  </optgroup>

</select>

edited Jan 17 '15 at 22:05

JasonMArcher

14,195
22
56
52

answered Aug 23 '12 at 14:31

Fakhr Alam

203
1
5
12

1

Works for me. Awesome!! – Talk nerdy to me Oct 14 '14 at 05:09
4

This works, but is there a way to remove the gap between options, and more importantly, that indent on the second to last option (seems to always be second to last)? – Goose Mar 30 '15 at 13:36

score 7 · Answer 2 · edited Jan 17 '15 at 22:12

You cannot set the font of the <option> 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h1>Set with jQuery</h2>
<select id="js">
    <option>Tangerine</option>
    <option>Tahoma</option>
    <option>Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>Set with CSS</h2>
<select id="css">
    <option class="tangerine">Tangerine</option>
    <option class="tahoma">Tahoma</option>
    <option class="timesnewroman">Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>List</h2>
<ul>
    <li>Tangerine</li>
    <li>Tahoma</li>
    <li>Times New Roman</li>
</ul>

The CSS one's working for me in Chrome 58 (on Linux), nice! – i336_ Aug 23 '17 at 12:28 — i336_, Aug 23 '17 at 12:28

score 3 · Answer 3 · answered Nov 01 '16 at 08:31

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:

<option value="myFontName">My Font Name</option>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<select id="selectfont">
<option value="tangerine">Tangerine</option>
<option value="tahoma">Tahoma</option>
<option value="times new roman">Times New Roman</option>
</select>

score 2 · Answer 4 · answered Jul 30 '16 at 11:21

2

You can simply use like this

<select id='lstFonts' class='form-control'>
    <option style="font-family:Arial" value="Arial">Arial</option>
    <option style="font-family:Verdana" value="Verdana">Arial</option>
</select>

answered Jul 30 '16 at 11:21

Nitesh Pogul

180
1
6

score 2 · Answer 5 · answered Jan 12 '11 at 19:16

2

Maybe you can use javascript? Can you try this ?

<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";

// Change anything else that you like!
</script>

<option id="tahoma .....>

answered Jan 12 '11 at 19:16

Eray

7,038
16
70
120

what browser you are using? I'm using Firefox and it's working. – Eray Jan 12 '11 at 19:23
FF recognizes fonts on options but most browsers do not – hunter Jan 12 '11 at 19:27
so, this isn't a cross-browser solution :( – Eray Jan 12 '11 at 19:28
see my updated jsfiddle: http://jsfiddle.net/95TVh/2/ FF recognizes the CSS classes but not the `font-family` on the option itself – hunter Jan 12 '11 at 19:29
because you are using – Eray Jan 12 '11 at 19:31

score 0 · Answer 6 · answered Jan 12 '11 at 20:45

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.

Nico Vink · Answer 7 · 2018-03-04T09:13:35.173

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

<!DOCTYPE html>
    <html lang="nl">
    <head>
    <meta charset="utf-8" />
    <title>font test</title>
    <meta name="generator" content="BBEdit 10.5" />
    <link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async />
    </head>
    <body>
    <style>
    @font-face {font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;}
    .edwardian{font-family: edwardian; font-size: 30px;}

    .arial{font-family: arial;}
    .times{font-family: times;}
    .verdana{font-family: verdana;}
    .helvetica{font-family: helvetica;}
    </style>
    <div id="fontdropdown1" class="dropdown" style="width: 300px;">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" class="arial">Arial</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" class="times">Times</a></li>
    <li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li>
    <li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li>
    <li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li>
    </ul>
    </div>
    <!-- test font dropdown -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script>
    </body>
    </html>

Change css font-family for separate options in select tag

7 Answers7

Linked

Related