'How to add content to the end of select option tag's placeholder

I'm trying to add some content (ie, text or icon) to the end of the <option> tag placeholder but I'm not quite sure how to do this. I want to be clear that I am not talking about appending content after whatever is in the placeholder but instead at the end of the placeholder.

For example, imagine the option tag in the browser shows a certain size, ie whatever is in the between the square brackets shown below:

I'm not trying to append content after the default option as shown below,

[default option "some_extra_content"                ]

but instead I'm hoping to achieve something like:

[default option                 "some_extra_content"]

Is there a way I can do this? I've been searching for a long time but I haven't seen anything that is helpful. All I've got so far is shown below but it's just a normal <select>

<select>
    <option selected="selected" value="">Select your option "some_extra_content"</option>
    <option value="a">A</option>
    <option value="b">B</option>
</select>
javascripthtml


Solution 1:[1]

option HTML element: Permitted content Text, possibly with escaped characters (like é).

You can try to pad the middle with   (non breaking spaces)

<html>
    <head>
        <style></style>
    </head>
    <body>
        <select id="select1">
            <option id="option0" selected="selected" value="">
                Select your option
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"some_extra_content"
            </option>
            <option id="option1" value="a">
                A
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp; More TEXT
            </option>
            <option id="option2" value="b">
                B
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp; Bees knees
            </option>
        </select>
        <script></script>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions