css - how to place image tags in a select imput bar -

i have select box below works perfectly; want place little colour box in each of option groups. tried using span tag within not seem work.

i don't want use anchor tags or images. prefer if possible have kind of container tag.

i have enclosed code below.

<select  name="search-legend">       <option value=""></option>       <option value="1"<?= $this->returnsearchvalue == "1" ? 'selected' : '' ?>> <span id="redbox"> </span>  value1 </option>       <option value="2"<?= $this->returnsearchvalue == "2" ? 'selected' : '' ?>> <span id="bluebox"></span>  value2 </option>       <option value="3"<?= $this->returnsearchvalue == "3" ? 'selected' : '' ?>> <span id="greenbox"></span>  value3 </option>       </select> 

the css

#redbox {   background: red;   } 

inside <option> html not supported. can style <option>

html

<select  class="search-legend">     <option value=""></option>     <option value="" class="redbox"></option>     <option value="" class="greenbox"></option>     <option value="" class="bluebox"></option>  </select> 

css

.search-legend option.redbox{     background:red; } .search-legend option.greenbox{     background:green; } .search-legend option.bluebox{     background:blue; }