发表新帖
发表新帖

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

前端 未结
关注
7 649
长情又很酷
长情又很酷 2020-11-29 07:59

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.

相关标签:
7条回答
  • 北海茫月
    2020-11-29 08:37

    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>

    0 讨论(0)
  • 悲哀的现实
    2020-11-29 08:37

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

    0 讨论(0)
  • 悲&欢浪女
    2020-11-29 08:45

    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>
    0 讨论(0)
  • 梦如初夏
    2020-11-29 08:49

    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/

    0 讨论(0)
  • 太阳男子
    2020-11-29 08:51

    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

    0 讨论(0)
  • 滥情空心
    2020-11-29 08:57

    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>
...
    0 讨论(0)
 看不清?
提交回复
热议问题