Selectmenu jQuery UI - 如何在选择列表中自定义项目的字体系列？

Question

如何为下拉列表（http://jqueryui.com/selectmenu/）的每个元素设置单独的font-family？ 感谢。

Answer 1

使用nth-child CSS选择器，请在此处查看演示：http://jsfiddle.net/2p9hy3Lc/

对于HTML：

<select name="speed" id="speed">
  <option>Slower</option>
  <option>Slow</option>
  <option selected="selected">Medium</option>
  <option>Fast</option>
  <option>Faster</option>
</select>

CSS就是这样的：

#speed-menu li:nth-child(1){
    font-family:courier;
}

#speed-menu li:nth-child(2){
    font-family:arial;
}

#speed-menu li:nth-child(3){
    font-family:georgia;
    font-style:italic;
}

请注意，jQueryUI会将-menu附加到新标记的元素的原始元素的id中。或者，您可以循环遍历jQuery中的元素，并在您要获得动态长度的下拉列表时分配它们。