[RESOLVED] Displaying Block Colours in Select List Box

[kbc1]

Hi all

I would like to know how I could display colour blocks instead of text for each option in a select list box.

I took a stab at the following but I get nothing but white blocks showing instead:


<option $selrange value=\"$colourid\"><img src=\"images/spacer.gif\" width=\"100%\" height=\"15\" style=\"background-color: $hex; display: block\" /></option>\n";


$hex holds hexadecimal colour values as you would expect for each option retrieved from the database.

Any ideas what I am doing wrong?

P.S. It is coded in PHP so just ignore the escaped quotes etc.

Thanks for reading.

P.P.S Below is my Source code for the full Select List:

<select id="selectedcolour" name="selectedcolour" size="1" class="mediumlistbox">
<option value="0">(Select a Colour)</option>
<option selected value="2"><img src="images/spacer.gif" width="100%" height="15" style="background-color: #A3E7FA; display: block" /></option>
<option value="6"><img src="images/spacer.gif" width="100%" height="15" style="background-color: #CCD80A; display: block" /></option>
<option value="5"><img src="images/spacer.gif" width="100%" height="15" style="background-color: #F99B14; display: block" /></option>
<option value="3"><img src="images/spacer.gif" width="100%" height="15" style="background-color: #FF71A6; display: block" /></option>
<option value="1"><img src="images/spacer.gif" width="100%" height="15" style="background-color: #F3A3FA; display: block" /></option>
<option value="4"><img src="images/spacer.gif" width="100%" height="15" style="background-color: #00FFCC; display: block" /></option>
</select>

[ray326]

Browser support for option styling is hit or miss but have you tried putting a class on each of those and styling that? Since the option is a block you may be able to just give it a width, height and background color.

[kbc1]

Thanks ray326, that seemd to do the trick.