Ideally I want a select element with a small image and text on some
lines and other lines with just text indented.

I got that in Firefox but not in IE.

The next best solution is to background color some lines and indent
the text on those lines. That also works in Firefox but IE does not
seem to allow setting the left margin in an option. IE lets me set the
background color initially in hardcoded text but setAttribute does not
set color when a line is changed and needs to be colored.

The script code is:

function colorMe(index)
{
cdH = document.getElementById('mySelect'); 
var value = cdH.options[index].value;
var text = cdH.options[index].text;
switch(value)
{
case '0': // its normal
cdH.options[index].text = 'START ' + text;
cdH.options[index].value = 1;
cdH.options[index].setAttribute('class', 'start');
break;
case '1': // its start type
text = text.substr(5);
cdH.options[index].text = 'STOP' + text;
cdH.options[index].value = 2;
cdH.options[index].setAttribute('class', 'stop');
break; 
case '2': /// its Stop type
text = text.substr(4);
cdH.options[index].text = text;
cdH.options[index].value = 0;
cdH.options[index].setAttribute('class', 'normal');
break;
}
cdH.selectedIndex = -1; 
}

---

Clarification of Question by hotdispatch-ga on 01 Mar 2006 07:30 PST

This is the select:



   <select size="20" id="mySelect"
onChange="colorMe(this.selectedIndex)" style="width:200px">

   <option value="2" class="normal">test 0 of this thing</option>

    <option value="1" class="start">START test 4 of this thing</option>

    <option value="0" class="normal"> test 5 of this thing</option>

    <option value="0" class="normal">test 6 of this thing</option>

<option value="0" class="normal">test 7 of this thing</option>

    <option value="0" class="normal">test 8 of this thing</option>

    <option value="2" class="stop">STOP test 3 of this thing</option>

<option value="0" class="normal">test 9 of this thing</option>

    <option value="0" class="normal" >test 10 of this thing</option>

    <option value="0" class="normal" >test 11 of this thing</option>

<option value="0" class="normal">test 1 of this thing</option>

    <option value="0" class="normal">test 3 of this thing </option> </select>



And the CSS in a seperate file:



option.Start 

{

background-color: #99CC99;

font-size: 14px; 

color: black

}