Двойной вариант цвета в поле выбора

Как вы можете видеть на изображении, у меня есть 7 вариантов в поле выбора. Можно ли сделать 2 div внутри одного <option> или градиентного фона. Мне нужно получить 2 цвета в одном <option>.

<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/

EDIT: Градиент работает в 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

Mmm, он должен работать, beacuse [префиксы не нужны] (http://shouldiprefix.com/#gradients) для Fx 10+, Op 11.6+, Ch 26+, IE 10. – lmgonzalves

Я только что проверил и у меня есть последние Хром. Другие градиенты работают, но не в поле выбора. Будет играть вокруг. Возможно, я найду решение. – JMusic

Двойной вариант цвета в поле выбора

ответ

Смежные вопросы