選擇框中的雙色選項

正如你所看到的圖像我在選擇框中有7個選項。是否可以在一個<option>或漸變背景內製作2個div。我需要在一個<option>中獲得2種顏色。

<td class="footable-visible" style="width:1px; "> 
     <div class="container" style="width:130px;">            
      <div class="row"> 
       <select id="mySelect" class="form-control"> 
        <option style="color:white;background-color:#72D527;"> </option> 
        <option style="color:white;background-color:#4DB6AC;"> </option> 
        <option style="color:white;background-color:#CE93D8;"> </option> 
        <option style="color:white;background-color:#FFAB91;"> </option> 
        <option style="color:white;background-color:#F9A825;"> </option> 
        <option style="color:white;background-color:#BCAAA4;"> </option> 
        <option style="color:white;background-color:#9E9E9E;"> </option> 
       </select> 
      </div> 
     </div> 
</td>

http://jsfiddle.net/9c6oca5q/

編輯：梯度是工作在Firefox，但無法在Chrome

1. Firefox    2. Chrome

來源

2015-10-27 JMusic

這是你的代碼：

<td class="footable-visible" style="width:1px; "> 
    <div class="container" style="width:130px;">            
     <div class="row"> 
      <select id="mySelect" class="form-control"> 
       <option style="color:white; background: -webkit-linear-gradient(#72D527, #C7EDC6); background: -o-linear-gradient(#72D527, #C7EDC6); background: -moz-linear-gradient(#72D527, #C7EDC6); background: linear-gradient(#72D527, #C7EDC6); "> </option> 
       <option style="color:white;background-color:#4DB6AC;"> </option> 
       <option style="color:white;background-color:#CE93D8;"> </option> 
       <option style="color:white;background-color:#FFAB91;"> </option> 
       <option style="color:white;background-color:#F9A825;"> </option> 
       <option style="color:white;background-color:#BCAAA4;"> </option> 
       <option style="color:white;background-color:#9E9E9E;"> </option> 
      </select> 
     </div> 
    </div>

來源

2015-10-27 12:40:18

奇怪的是工作在Firefox，但無法在Chrome ...這是我用我自己以前做過，但在Chrome中只有白色。 – JMusic

你需要一個漸變：

.test{ 
    background-image: linear-gradient(blue 50%, green 50%); 
}

DEMO

來源

2015-10-27 12:40:21 lmgonzalves

奇怪的是它在Firefox上工作，但沒有在Chrome中......這是我以前做過的，但在Chrome中只有白色。 – JMusic

嗯，它應該工作，因爲Fx 10+，Op 11.6+，Ch 26+，IE 10 [不需要前綴]（http://shouldiprefix.com/#gradients）。 – lmgonzalves

我剛剛檢查過，我有最新鉻。其他漸變正在工作，但不在選擇框中。會玩。也許我會找到解決方案。 – JMusic

選擇框中的雙色選項

回答

相關問題