Multiple Styles In Option Element

Question

Possible Duplicate:
Styling select options

I am wondering if it is possible to apply two styles within an option element? For example, in my code below, I would like my product name to be of style color:black; while the price be of another style color:red; font-weight:bold;. I have tried wrapping my price around span.price but that did not work.

<select>
  <option>Apple  <span class="price">$1.00</span></option>
  <option>Banana <span class="price">$2.50</span></option>
  <option>Cherry <span class="price">$1.50</span></option>
</select>

@Diodeus Sorry, I missed that thread :( – Jon Dec 04 '12 at 18:39 — Jon, Dec 04 '12 at 18:39

score 2 · Accepted Answer · answered Dec 04 '12 at 18:36

2

option styles are styled in a way native to the platform. You cannot do what you desire without changing the markup (and/or using JavaScript)

answered Dec 04 '12 at 18:36

wanovak

6,117
25
32

That's what I thought :( Thank you for verifying my hunch. – Jon Dec 04 '12 at 18:38

score 0 · Answer 2 · answered Dec 04 '12 at 18:35

Try this CSS in the of your HTML document, or in your external stylesheet (strip out the <style> tags if you put it in an external stylesheet):

<style type="text/css">
select option { color: black; }
select option span.price { color: red; font-weight:bold; }
</style>

By doing this, you are basically saying "All options in my select should have black text color". Then, you're overriding that by saying "Any spans with a class of "price" inside an option inside my select should have a red text color."

Multiple Styles In Option Element

2 Answers2