分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – CSS – 更改各个选项的font-family，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

这是我想要实现的目标：

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

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

这是一个JS@L_262_2@：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应用于单个选项,但它确实设法应用颜色.有谁知道如何解决这个问题？