Tab character inside select option [duplicate]

Question

I have an <Option> inside a <select> on my HTML-Form.

For better visibility, I want to use a TAB inside my Option.

Now the selection is in the Dropdown displayed as:

1. Mister Test - Technician
2. Misses VeryLongTest - Accounting
3. Mister X - Housekeeping

I instead want it displayed like:

1/........Mister Test........................- Technician

2/........Misses VeryLongTest.......- Accounting

545/....Mister X............................- Housekeeping

Is there any way to do this?

Answer 1

No, you cannot do that. Content inside <option> tag is treated as plain text. It doesn't recognize any tabs nor markups. You need to use spaces unfortunately.

As it was said in question's comments it is possible to write a script for that. Unfortunately, if you cannot do it with spaces you will not be able to make a proper script. You would need a const width font like Courier new. Then you can easily write the script for that:

function alignedOptionText(spaceAvailble, beforeTab, afterTab) {
    spaces = "";
    for (var i = 0; i < beforeTab.length; ++i)
        spaces += " ";
    return beforeTab + spaces + afterTab;
}