如何在jQuery Mobile中为各个select.option元素指定字体系列？

Question

A typical jQuery mobile custom select menu is coded like this:

<div class="ui-field-contain">
    <select id="mymenu" data-native-menu="false">
        <option data-placeholder="true">Choose one...</option>
        <option value="1">The 1st Option</option>
        <option value="2">The 2nd Option</option>
        <option value="3">The 3rd Option</option>
    </select>
</div>

The framework then turns that into this:

<ul id="mymenu-listbox" class="ui-selectmenu-list ui-listview">
   <li class="" data-option-index="1" data-icon="false" role="option" aria-selected="false">
        <a class="ui-btn" href="#">The first option</a>
<!--et cetera-->

I'm trying to create a select menu where the user selects a custom font-family. Obviously, I'd like to be able to visualise each option in the list, but inline styling the <option> tags isn't working. How can I achieve this?

Answer 1

With help from @Mr Lister, the following sass works:

/*first child is an invisible screen*/
#text-font-list-listbox, #heading-font-list-listbox > ul >
  li:nth-child(2) > a
    font-family: Georgia,serif
  li:nth-child(3) > a
    font-family: Palatino,serif
  li:nth-child(4) > a
    font-family: Times,serif
  /*etc*/