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

2019-01-06 20:45发布

站内问答 / HTML/CSS
1678 6 5

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.

6条回答
走好不送
2楼-- · 2019-01-06 21:07

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) 举报
时光不老，我们不散
3楼-- · 2019-01-06 21:07

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) 举报
时光不老，我们不散
4楼-- · 2019-01-06 21:14

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.

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
5楼-- · 2019-01-06 21:20

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) 举报
Lonely孤独者°
6楼-- · 2019-01-06 21:25

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) 举报
ら.Afraid
7楼-- · 2019-01-06 21:27

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)