

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

[code]

           <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>
    
[/code]


CC BY-SA 3.0
2016-03-13T04:19:04.090
23077
2016-04-12T13:47:25.230
9359
question
javascript html css
プルダウン式ボタンの背景色に、"グラデーション"を設定するには


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

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

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

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


CC BY-SA 3.0
2016-03-13T13:10:46.780
23097
2016-03-13T13:10:46.780
3475
23077
answer