0

下記のソースコードは、プルダウンボタンのselectedの『選曲(停止)』の
背景色を、グラデーションに設定したものです。
ただ、現時点が『選曲(停止)』以外の状態にあり、その状態でプルダウン
ボタンを開くと、『選曲(停止)』の背景色がグラデーションではなく、
現時点の背景色になっています(*『選曲(停止)』を選んで押すと、
グラデーションになりますが…)。
どう書き換えれば、プルダウンボタンを開いているときも、『選曲(停止)』の
背景色がグラデーションになるのか、ご教示ください。

       <bgsound id="bgm" src="" loop="-1">

  <script type="text/javascript">
     <!--
       function selectBgm(e){
          var selectedIndex = e.selectedIndex;
              bgm.src= e[selectedIndex ].value; 
              document.getElementById("bgmSelector").style.background=e[selectedIndex].style.background;
   }
     //-->
  </script>


    <SELECT id="bgmSelector" style="background: linear-gradient(left, gold 0%, pink 35%, lime 100%);background: -webkit-linear-gradient(left, gold 0%, pink 35%, lime 100%); background: -moz-linear-gradient(left, gold 0%, pink 35%, lime 100%); background: -o-linear-gradient(left, gold 0%, pink 35%, lime 100%); background: -ms-linear-gradient(left, gold 0%, pink 35%, lime 100%);" onchange="selectBgm(this);">
      <OPTION style="background: linear-gradient(left, gold 0%, pink 35%, lime 100%);background: -webkit-linear-gradient(left, gold 0%, pink 35%, lime 100%); background: -moz-linear-gradient(left, gold 0%, pink 35%, lime 100%); background: -o-linear-gradient(left, gold 0%, pink 35%, lime 100%); background: -ms-linear-gradient(left, gold 0%, pink 35%, lime 100%);" value="" selected>選曲(停止)</OPTION>
      <OPTION style="background: green;" value="クラシック.wav">クラシック</OPTION>
      <OPTION style="background:deeppink;" value="目覚まし.wav">目覚まし音</OPTION>
    </SELECT>

1 件の回答 1

2

残念ながら、一般的な方法はありません。

SELECT要素のポップアップメニュー内でのCSSサポートは各ブラウザ・プラットフォームでまちまちで、

  • iOS/OSX の Safari ではまったくサポートしていない
  • Android/OSX の Google Chrome ではまったくサポートしていない
  • それ以外の Google Chrome では単色のみサポートしていてグラデーションは不可

などなどです。Firefox、IE、Edgeも完全にはサポートできていなかった覚えがあります。

1
  • 回答ありがとうございました。単色でしたら、開けているときもちゃんと設定どおりの背景色になりますが、グラデーションはうまく行きません。押したらグラデーションになるのですが…サポートされていないのですか。
    – user9359
    Commented 2016年3月13日 13:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。