Состояние зависания на выпадении (PayPal)

Question

Я использую раскрывающийся список, созданный PayPal, который я пытаюсь создать.

Основы в порядке, но я хотел бы изменить цвет наведения при переходе по пунктам меню.

Возможно ли это?

HTML:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
    <input type="hidden" name="cmd" value="_s-xclick"> 
    <input type="hidden" name="hosted_button_id" value="MSGG55TCNBLJN"> 
    <table> 
    <tr> 
     <td><input type="hidden" name="on0" value="Choose your size and style:"> 
     Choose your size and style:</td> 
    </tr> 
    <tr> 
     <td><select name="os0"> 
      <option value="Girly - Small" class="girly">Girly - Small </option> 
      <option value="Girly - Medium" class="girly">Girly - Medium </option> 
      <option value="Girly - Large" class="girly">Girly - Large </option> 
      <option value="Girly - X-Large" class="girly">Girly - X-Large </option> 
      <option value="Guys - Small" class="guys">Guys - Small </option> 
      <option value="Guys - Medium" class="guys">Guys - Medium </option> 
      <option value="Guys - Large" class="guys">Guys - Large </option> 
      <option value="Guys - X-Large" class="guys">Guys - X-Large </option> 
     </select></td> 
    </tr> 
    </table> 
    <input type="image" src="http://www.dwste.com/images/buy_btn_pink.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
</form> 

CSS:

select { 
    width: 280px; 
    height: 40px; 
    padding: 0 0 0 10px; 
    border: 0px; 
    border-radius: 0; 
    outline: 0; 
    margin-left: -3px; 
    margin-bottom: 7px; 
    overflow: hidden; 
    background: #EEE url(http://www.dwste.com/images/dropdown_btn.png) no-repeat right; 
    font-family: Georgia, Times, serif; 
    font-size: 18px; 
    font-style: italic; 
    line-height: 40px; 
    -moz-background: none; 
    -webkit-appearance: none; 
    appearance: none; 
} 
select option.girly:hover { 
    display:block; 
    background-color: #0F0; 
} 
select option.guys:hover { 
    background: #FF0; 
} 
td { 
    font-family: Georgia, Times, serif; 
    font-size: 18px; 
    font-style: italic; 
} 

Answer 1

В настоящее время не представляется возможным, чтобы стиль парил вариант элемента с помощью CSS в одиночку, так как это зависит от типа операционной системы , Вы можете использовать методы замены элементов, которые вместо этого используют Javascript.

option { 
    background: #f00; 
} 

option:hover { 
    background: #ff0; 
} /*this doesn't work at all*/ 

http://jsfiddle.net/Kyle_Sevenoaks/dTFAp/