0

スタイルを設定しようとしている 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;
}
4

1 に答える 1

2

オペレーティング システムに依存するスタイルであるため、ホバーされたオプション要素を CSS だけでスタイルすることは現在できません。代わりに Javascript を使用する要素置換手法を使用できます。

option {
    background: #f00; 
}

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

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

于 2013-06-14T07:54:45.437 に答える