在下拉菜单中设置悬停状态 (PayPal)答案

【问题标题】：Styling hover state on a drop down (PayPal)在下拉菜单中设置悬停状态 (PayPal)
【发布时间】：2013-06-10 19:37:28
【问题描述】：

我正在使用由 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;
}

【问题讨论】：

标签： html css drop-down-menu paypal hover

【解决方案1】：

目前无法单独使用 CSS 设置悬停选项元素的样式，因为它是依赖于操作系统的样式。您可以使用使用 Javascript 的元素替换技术。

option {
    background: #f00; 
}

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

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

【讨论】：