带有颜色框的jQuery Mobile Select Dropbox

Question

I'm wondering is it possibleto create a select control as below??

I tried something like below but it dosn't push a box inside instead colors the whole dropdown. and after selecting the selected color is not shown in the list

<select name="appCalendar" id="appCalendar">
 <option value="#000000" style="background-color: Black;color: #FFFFFF;">Black</option>
 <option value="#808080" style="background-color: Gray;">Gray</option>
 <option value="#A9A9A9" style="background-color: DarkGray;">DarkGray</option>
 <option value="#FF0000" style="background-color: Red;">Red</option>
 <option value="#A52A2A" style="background-color: Brown;">Brown</option>
 <option value="#DEB887" style="background-color: BurlyWood;">BurlyWood</option>
 <option value="#F5F5DC" style="background-color: Beige;">Beige</option>
</select>

Thanks for your time in advance.

Answer 1

Not using background-colors. I think the only way in this case is to use some javascript-plugin that makes a custom element and uses an underlaying select.

For example this one: http://designwithpc.com/Plugins/ddSlick