드롭 다운시 스타일링 호버 상태 (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/