In a html select tag,how to change style of partial text of enclosed option tags?

Question

Given the following HTML code:

<select>
  <option>yellow</option>
  <option>red</option>
  <option>blue</option>
</select>

For example, changing the color of second character in text "blue".

@BoltClock: Did you really add the sentence "Given that following html code:"? Or is the revision history lying? — thirtydot, May 12 '12 at 03:48
At max you can style the nth option using `nth-child(x)`, I don't think you can style a specific letter in the option. Unless you are willing to try a custom drop down.. but they are not going to be real ` — Selvakumar Arumugam, May 12 '12 at 03:54
Duplicate of http://stackoverflow.com/questions/3354979/styling-part-of-the-option-text as Jonathon pointed out. — Selvakumar Arumugam, May 12 '12 at 03:58
@thirtydot: No, apparently the OP had ninja edited it out for whatever reason just as I was fixing the Markdown. The system needs to learn about revision merging. — BoltClock, May 12 '12 at 04:01

score 2 · Answer 1 · edited May 23 '17 at 12:04

2

I do not believe there is currently a way to do that in CSS or (X)HTML. As "DaneSoul" pointed out, you could style the <option>s themselves, but you can't individually style different parts of the text inside of them.

The <option> tag cannot have any children other than a text node.

This question/answer has more information, confirming this.

edited May 23 '17 at 12:04

Community

1
1

answered May 12 '12 at 03:55

BumbleShrimp

2,150
23
42

Yah, I now see that my unswer isn't realy what the task was... But I suppose it can be helpfull anyway. – DaneSoul May 12 '12 at 03:58
@DaneSoul I almost did the same, but somehow noticed `second character`.. and left a comment :) – Selvakumar Arumugam May 12 '12 at 03:59

score 0 · Answer 2 · answered May 12 '12 at 03:53

0

<select>
  <option id='option1'>yellow</option>
  <option id='option2'>red</option>
  <option id='option3'>blue</option>
</select>

Then add styles in CSS

#option3{ color: blue; }

If you need do it in dynamic, you can use JQuery:

$("#option3").css("color", "blue");

answered May 12 '12 at 03:53

DaneSoul

4,491
3
21
37

Read the question he want's to change the color of second character in text "blue" not change the color of text "blue". – sandeep May 12 '12 at 03:59
Yah, I have unswered and then saw this detail... – DaneSoul May 12 '12 at 04:01
oh wait.. you can use `nth-child` (`select:nth-child(2) { color: blue; }`) instead of going thru the pain of setting class/id for each options :P [**DEMO**](http://jsfiddle.net/skram/a3UDy/) – Selvakumar Arumugam May 12 '12 at 04:01
`select:nth-child(2)` is not the same as `select :nth-child(2)` – BoltClock May 12 '12 at 04:14

score 0 · Answer 3 · answered May 12 '12 at 04:24

The only way this could be done is to create your own drop down list with DIVs, SPANs, perhaps a UL or two, and a bit of JavaScript (something like a CSS dropdown navigation menu cxould work too I suppose) then use JavaScript to set the value to be sent for your form.

Probably more work than it's worth.

In a html select tag,how to change style of partial text of enclosed option tags?

3 Answers3