Question

I need to make a portion of the text in a form select option label a different color to help it stand out. Anything with a () needs to be red for example. Is this even remotely possible?

<select id="product" name="product" onchange="calculatetotal();">
    <option value="5">1-4 years ($5)</option>
    <option value="10">5-9 years ($10)</option>
    <option value="15">10+ years ($15)</option>
</select>

Answer 1

Ok so I’ve made something for you, tested and runs on Firefox 15.1 pretty well, but surely you’ll have trouble for cross-browser : My Fiddle

HTML

<select id="product" name="product" onchange="calculatetotal();">
    <option value="5" class="red">1-4 years</option>
    <option value="10" class="red">5-9 years</option>
    <option value="15" class="red">10+ years</option>
</select>

CSS

option.red:nth-child(1):after{
    content: "($5)";
    color: red;
}

option.red:nth-child(2):after{
    content: "($10)";
    color: red;
}

option.red:nth-child(3):after{
    content: "($15)";
    color: red;
}