jquery – CSS – 更改各个选项的font-family

这是我想要实现的目标：

>标准SELECT表单元素
> FIRST选项将包含Verdana的font-family
>所有其他选项将具有Arial的font-family
>选择选项后,SELECT将出现在该选项的font-family中
>这是使用CSS和JS的组合完成的. JS用于更改SELECT的类,以便它可以应用正确的样式.

我已经在Firefox和IE11中满足上述要求,但在Chrome 36(Windows)中没有.

这是一个JSFiddle：http://jsfiddle.net/KhvJc/

CSS：

select {
    width: 150px;
    font-size: 12px;
    padding: 5px;
    height: 30px;
}

/* when the first option is selected */
select.empty {
    color: #959595;
    font-family: Verdana;
}

/* all options except the first when the first option is selected and the select has focus */
select.empty:focus option:not(:first-child) {
    color: #282525;
    font-family: Arial;
}

/* first option when the select has focus */
select:focus option:first-child {
    color: #BDBDBD;
    font-family: Verdana;
}

JS：

$('select').change(function(){
    if($(this).val() == '')
    {
        $(this).addClass('empty');
    }
    else
    {
        $(this).removeClass('empty');
    }
}).change();

HTML：

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

正如您将看到的,在Chrome中,它不会将font-family应用于单个选项,但它确实设法应用颜色.有谁知道如何解决这个问题？

不确定OP的确切逻辑顺序？选项：first-child是font-family属性设置为Verdana的唯一元素吗？使用其他选项元素将font-family属性设置为Arial？然后,在初始选择或更改事件之后,选项：first-child font-family设置为Arial？

OP上的这篇文章看起来像o.k.在jsfiddle,设置font-family,在chrome unstable(37)和chromium(33).

如果没有在那里工作,请尝试添加

！重要

在font-family属性值之后,即.

Verdana！重要;

Arial！important;

jsfiddle http://jsfiddle.net/guest271314/kAdL9/

jsfiddle http://jsfiddle.net/guest271314/E2dze/(分别应用Monospace和Impact字体;这可能更容易查看差异？)

看到

Override USER AGENT STYLE SHEET – Chrome

chrome : how to turn off user agent stylesheet settings?