Trying to add color to select option pulldown

Here's the deal, I run a decal webshop and am adding additional colors that the customer can choose from. What I'm trying to do is put a little square with the rgb value of the color name to give the customer a better idea of what their product will look like.

I've managed to generate these little color swatches outside of the select pulldown box, but all of the little squares are black inside the pulldown. Does anyone know of some kind of magic to add the colored squares to the pulldown?

Here's a link so you can see what I am talking about http://decaldepot.net/zencart/testing.php

Thanks!

 

You have specified the colours in the other bit but not in the drop down box:

<font color="white">â– &nbsp;</font>White<br>
<font color="black">â– &nbsp;</font>Black<br>
<font color="blue">â– &nbsp;</font>Blue<br>
<font color="red">â– &nbsp;</font>Red<br>
<font color="yellow">â– &nbsp;</font>Yellow<br><br>

<select name="id[1]" id="attrib-1">
  <option value="14">â– &nbsp;White</option>
  <option value="15">â– &nbsp;Black</option>
  <option value="15">â– &nbsp;Blue</option>
  <option value="15">â– &nbsp;Red</option>
  <option value="15">â– &nbsp;Yellow</option>
</select>

Code (markup):

Maybe use a colour picker instead?

 

Hmm.. I'm not sure how that happened, but when I view source in firefox I get this:

<select name="id[1]" id="attrib-1">
  <option value="14"><font color="white">â– &nbsp;</font>White</option>
  <option value="15"><font color="black">â– &nbsp;</font>Black</option>

  <option value="15"><font color="blue">â– &nbsp;</font>Blue</option>
  <option value="15"><font color="red">â– &nbsp;</font>Red</option>
  <option value="15"><font color="yellow">â– &nbsp;</font>Yellow</option>
</select>

Code (markup):

I'm guessing I can't use the font tag within the option tag?

 

Try pressing shift refresh because thats not the source I see.

 

I did. Looks right to me. I did find this:

<option style="color: rgb(255,255,0); background-color: rgb(0,64,0);">whatever</option>

Code (markup):

I've updated my page, but unfortunately something is keeping it from working fully. When I expand the options I see the colors but when I select one and the select box closes to normal, the option is no longer colored. I'm guessing something in my stylesheet is causing this, but I'm not sure what it is.

 

Well, it probably has something to do with what happens on 'hover'. so search for that in your stylesheet.

 

I don't think what you are trying to do is going to be very cross browser compatible unless you can do it with CSS.