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>
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
"some_extra_content"
</option>
<option id="option1" value="a">
A
More TEXT
</option>
<option id="option2" value="b">
B
Bees knees
</option>
</select>
<script></script>
</body>
</html>