Question

这是我想要实现的目标：

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

我已经在Firefox和IE11中满足上述要求，但在Chrome 36（Windows）中没有。

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应用于各个选项，但会设法应用color。有谁知道如何解决这个问题？

Answer 1

不确定OP的确切逻辑顺序？ option:first-child是font-family属性设置为Verdana的唯一元素吗？其他option元素font-family属性设置为Arial？然后，在初始select或change事件之后，option:first-child font-family设置为Arial？

OP的作品似乎工作o.k.在jsfiddle，设置font-family，在chrome unstable（37）和chrome（33）。

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

!important

在font-family属性value之后，即。，

Verdana !important;

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?

Answer 2

试试这个:(我已经在我的Firefox中测试过并且工作正常）

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

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

JavaScript代码：

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

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

JSFiddle

Answer 3

将!important添加到属性值。

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

3 个答案: