Html option part with other color

Question

I have select box with options:

<select name="status_id">
  <option value="">Select</option>
  <option value="1">IMPORT <span style="color:red">10</span></option>
</select>

I need show number 10 with red color. But my code doesnt work. How can i solve this? Thanks!

Possible duplicate of [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) [in short: it cannot be done] — GrafiCode, Sep 16 '19 at 10:02
@GrafiCode I would argue it's not an exact duplicate, because the OP is asking how to style just part of the text in the option (the text in the span tag), not the entire text. However, I don't believe option tags can have children (i.e., the span), so that would make the OP's HTML invalid. — JoshG, Sep 16 '19 at 10:04
This looks like a more appropriate duplicate: [Styling part of the OPTION text](https://stackoverflow.com/questions/3354979/styling-part-of-the-option-text) — JoshG, Sep 16 '19 at 10:52

jsadev.net · Answer 1 · 2019-09-16T10:27:07.670

2

Formatting options like the way you want is not supported by HTML, because they are OS-dependent "replaced" elements wich can't be styled using CSS.

If you want to format your options you have to use a plugin for your selectboxes. There are plugins wich are looking like selectboxes but they consist with regular, styleable HTML elements, instead.

For example something like Select2.

edited Sep 16 '19 at 10:27

answered Sep 16 '19 at 10:03

jsadev.net

2,800
1
16
28

score 0 · Answer 2 · answered Sep 16 '19 at 10:03

0

Change the background color of the option by selecting it with its value

option[value='1']

option[value='1']
{
background-color:red
}

<select name="status_id">
    <option value="">Select</option>
    <option value="1">IMPORT 10</option> 
    <option value="2">IMPORT 20</option> 
    <option value="3">IMPORT 30</option> 
 </select>

answered Sep 16 '19 at 10:03

ellipsis

12,049
2
17
33

1

I think the OP just wanted to style part of the text in the option, not the entire thing. I think they wanted just the 10 to be red (i.e., the text in the span). But as I mentioned above, I believe a span in an option is invalid HTML. – JoshG Sep 16 '19 at 10:08

score 0 · Answer 3 · answered Sep 16 '19 at 10:10

0

you don't need use anything in your codes. Also it is illegal to use span in the option of the select box you better to see this here An option element cannot have any child elements. So yes, it is bad.

answered Sep 16 '19 at 10:10

spy developer

39
9

Pushprajsinh Chudasama · Answer 4 · 2019-09-16T11:37:37.977

Generally, you can't. And you can not use span inside option tag. This element is an example of a "replaced element", these are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a but are actually composed of regular HTML elements that CAN be styled.

Otherwise, you can try the Bootstrap Select library or the library below (since it has a bootstrap theme).

Html option part with other color

4 Answers4