32

I have a drop-down that lists font families. Like Tahoma, Arial, Verdana, etc. I want to change the font-family of each drop-down item according to the value it represents. Just like Photoshop does it.

I changed the CSS for each drop-down item but it only works on FireFox. It doesn't work on any other browser.

I don't want to use any jQuery plugin.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
Mohal
  • 581
  • 1
  • 8
  • 24

8 Answers8

19

That's because the select elements children (options) aren't really stylable and firefox seems to be the only browser to ignore that part of the spec.

The workaround is to replace your select element with a custom widget that uses only stylable elements and perhaps a little javascript for the interactivity. like what's done here: http://jsfiddle.net/sidonaldson/jL7uU/ or http://jsfiddle.net/theredhead/4PQzp/

Kris
  • 40,604
  • 9
  • 72
  • 101
  • 8
    Firefox isn’t really violating the spec. Rather, the specs are silent about the issue whether `option` elements are styleable (though the natural expectation would be that they can be styled like any other element, but implementations often use technologies that do not allow that). – Jukka K. Korpela Apr 30 '13 at 08:32
  • 1
    I recall reading that form controls should be platform native. Can't seem to find where I read that though, and I may simply be mistaken about where I read it. Still, most browsers do use platform native form controls as far as I can tell. – Kris Jul 09 '13 at 12:10
  • added another link to a similar fiddle of my own – Kris Aug 12 '15 at 09:53
5

You can do something like this

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

Kazi Hasan Ali
  • 311
  • 4
  • 9
4

You can set fonts for an HTML drop-down in the following way:
1. Build your list of options that will be displayed in your dropdown, but don't apply any styling/classes to any of those options. In PHP I would store my list of options to a variable and then use that variable to add options to my dropdown which I'll show below.
2. When you want to actually insert the dropdown into the page, use the SELECT tag and put some CSS styling inside that tag as I've shown below:

<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>

That works 100% fine for me on the website I'm currently working. This is just the styling that I've used in my page, but it can be whatever you need it to be.

Sayed Mohd Ali
  • 2,156
  • 3
  • 12
  • 28
craig-c
  • 161
  • 2
  • 5
3

I know this is an old question, but I have found a simpler solution that seems to work in most browsers, if not all (tested in FireFox, Chrome and Edge).

To change the style of each individual item in a select, I simply added a style attribute to the option tags.

Here is an example:

<select>
    <option style="font-family:Arial;background-color:#F22">Arial</option>
    <option style="font-family:'Arial Black'">Arial Black</option>
    <option style="font-family:Verdana">Verdana</option>
</select>
Budd-E
  • 41
  • 3
1

What you can do in CSS is what you described: setting font-family on option elements, and this has limited browser support. Browsers may implement select elements using routines that are partly or completely immune to CSS.

The workaround is to use something else than a select element, such as a set of radio buttons, but it will of course be rendered differently from a dropdown menu. Then you can use e.g.

<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
bdkopen
  • 494
  • 1
  • 6
  • 16
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

I am not the most CSS wise guy around, but it seems to me that if styling the select element changes the font, as many other answers submit, then a CSS rule referring to selects should work, too.

In my case I set the font-family on html and it applied everywhere except select elements. So I changed the rule to apply to html and select elements and it worked. Tested on Chrome and Edge (although Edge didn't need the select rule to begin with).

Bottom line: html, select { font-family: Verdana, Geneva, sans-serif; }

Siderite Zackwehdex
  • 6,293
  • 3
  • 30
  • 46
-5

This should Give you an Idea as to ho to accomplish this:

<select>

    <option value="Arial">First</option>
    <option value="Verdana">Second</option>


    </select>




    $(function() {
    $('select > option').hover(function() {
        $(this).parent().css({fontFamily:$(this).val()})    
})            
})

JSFIDDLE

defau1t
  • 10,593
  • 2
  • 35
  • 47
  • he said he don't want to use jquery. – khurram May 22 '12 at 07:59
  • 1
    Would be worth considering if it was cross-browser, but didn't work in Chrome when I tried it just now. – Thomas W Apr 30 '13 at 08:55
  • That was a weird stuff to do man. Its horrible as a programming practice, but i loved the originality of it and nobody deserves to be downvoted for "trying to help" so... – Mbotet Jan 13 '22 at 08:57
-5

Try this:

<html>
  <head>
    <style>
.styled-select {
        overflow: hidden;
        height: 30px;
}
.styled-select select {
        font-size: 14pt;
        font-family:"Times New Roman",Times,serif;
        height: 10px;
}
</style>
    <title></title>
  </head>
  <body>
    <div class="styled-select">
      <select>
        <option selected="selected" >One</option>
        <option >Two</option>
      </select>
    </div>
  </body>
</html>
DevAshish
  • 11
  • 6