Jquery CSS-更改单个选择选项的字体系列

以下是我想说的：

• 标准选择表单元素
• 第一个选项将具有Verdana字体系列
• 所有其他选项将具有Arial字体系列
• 选择一个选项后，“选择”将显示在该选项的字体系列中
• 这是使用CSS和JS的组合来完成的。JS用于更改SELECT的类，以便它可以应用正确的样式

我已经在Firefox和IE11中实现了上述要求，但在Chrome36（Windows）中没有

下面是一个JSFIDLE：

CSS:

JS:

HTML:

空选项
选择1
选择2
选择3
选择4

---

正如您将看到的，在Chrome中，它不会将

字体系列

应用于单个选项，但会将

颜色

应用于这些选项。有人知道如何解决这个问题吗？

不确定操作时逻辑的确切顺序吗？

option:first child

是其

font-family

属性要设置为

Verdana

的唯一元素吗？是否将其他

选项

元素

字体系列

属性设置为

Arial

？然后，在初始

选择

或

更改

事件之后，

选项：第一个孩子

字体系列

设置为

Arial

OP的作品在JSFIDLE、设置

font-family

、chrome不稳定（37）和chrome（33）方面似乎都很好

如果在那里不起作用，请尝试添加

！重要信息

在

字体系列

属性

值

之后，例如

威尔达那！重要的

Arial！重要的

JSFIDLE

JSFIDLE（分别应用
Monospace
和
Impact
字体；哪种字体更容易查看它们之间的差异？）

看


添加
！属性值的重要信息。
试试这个：（我已经在Firefox中测试过了，效果很好）

JavaScript代码：

$('option')
    .first().addClass('first')
    .siblings().addClass('not-first');

$('select').change(function(){
    $(this).attr('class', $('option:selected', this).attr('class'));
}).change();

我想我在什么地方读到过，除了颜色和背景色之外，chrome不允许使用样式元素。你是认真的吗？在日期之前不可能设置选项的样式。你是怎么得到彩色输出的？Chrome的哪个版本？我看不到任何颜色？@sarbbottam-请仔细阅读这篇文章，上面清楚地写着“Chrome 36”，还有一个JSFIDLE链接，你可以用它来测试。我的坏@GSTAR。我误解了它。我把它读作“在
Chrome
中工作”。不知道IE和FX允许设置
选项的样式。这已被记录为铬44917问题（4年前如此…），第一个选项是Verdana，所有其他选项都是Arial。选择选项后，选择元素（即外部零件）必须显示在所选选项的字体族中。让我知道，如果你想让我创建一个简单的模型，我知道这是有点混乱！
$('select').change(function(){
    if($(this).val() == '')
    {
        $(this).addClass('empty');
    }
    else
    {
        $(this).removeClass('empty');
    }
}).change();

<select>
    <option value="">Empty Option</option>
    <option value="1">Option 1</option>
    <option value="1">Option 2</option>
    <option value="1">Option 3</option>
    <option value="1">Option 4</option>
</select>

/* For non-first options */
.not-first {
    color: #282525;
    font-family: Arial;
}

/* For first option */
.first {
    color: #BDBDBD;
    font-family: 'Times New Roman';
}

$('option')
    .first().addClass('first')
    .siblings().addClass('not-first');

$('select').change(function(){
    $(this).attr('class', $('option:selected', this).attr('class'));
}).change();