CODEWITHSUNDEEP
htmlcssselectdrop-down-menu
Mohal
Mohal

Reputation: 581

How to change font-family of drop down's list item?

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.

Upvotes: 32

Views: 115170

Answers (8)

Budd-E
Budd-E

Reputation: 41

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>

Upvotes: 3

Siderite Zackwehdex
Siderite Zackwehdex

Reputation: 6560

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; }

Upvotes: 0

craig-c
craig-c

Reputation: 161

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.

Upvotes: 4

Kazi Hasan Ali
Kazi Hasan Ali

Reputation: 306

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>

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

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>
...

Upvotes: 1

Kris
Kris

Reputation: 41827

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/

Upvotes: 22

DevAshish
DevAshish

Reputation: 11

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>

Upvotes: -5

defau1t
defau1t

Reputation: 10619

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

Upvotes: -5

Related Questions