Aligning part of a select option's text on the left and part on the right?

Question

I have a select box and I need to have some of the options' text aligned to the left with the rest to the right, like this:

| option 1      0.5 |
| option 2      1.5 |

Is that possible? I thought about putting div's in the option, but in searching to see if that's allowed I ran across several places that said it wasn't.

Thanks for your help.

Woodson

Answer 1

The option element content is taken as plain text (no tags are recognized), so there is no direct way to do it. As a clumsy workaround, you can hand-format the options using a monospace font and use no-break spaces:

    <style>
    select, option { font-family: Consolas,  monospace; }
    </style>
    <select>
    <option>option 1          0.5
    <option>option 2          1.5
    <option>one more option 110.5
    </select>

(where the spaces inside the option elements are no-break spaces; use   for them if you don’t know how to type no-break spaces in your authoring environment).

A completely different workaround, or approach, is the replace the select element by a set of checkboxes (or, depending on desired logic, radio buttons) and associated labels. You can then represent this data in a table and set suitable formatting on it:

    <table>
    <tr><td><input type=checkbox> <td>option 1 <td align=right>0.5
    <tr><td><input type=checkbox> <td>option 2<td align=right>1.5
    <tr><td><input type=checkbox> <td>one more option <td align=right>110.5
    </table>

Sakovich

Answer 2

Its kind of a problem as you cant put a div inside a select tag like you stated. The only option inside a select tag is and you can read about it more here: optgroup

Although that won't help you much as you are trying to edit inside an option tag itself. I would suggest that you would try to sort it out using spaces in collaboration with the select box size so to make it fit your preferred alignment

Sloane

Answer 3

At the moment I am continuing to work with a workaround in which suitable spaces are inserted.

select option {
     font-family: monospace;
 }

<select>
  <option>TEXT ONE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.02</option>
  <option>LONG TEXT&nbsp;&nbsp;&nbsp;&nbsp;1.00</option>
  <option>TEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100.00</option>
</select>

I usually solve that with some JavaScript code.

max_chars_col_1 = Math.max('TEXT ONE'.length, 'LONG TEXT'.length, ...);

option.innerHTML = 'TEXT ONE' + '&#160'.repeat( max_chars_col_1 - 'TEXT ONE'.length + max_chars_col_2 - '0.02'.length + 1 ;

Wismar

Answer 4

text-align-last: left; works !!!

<form>
    <select class="custom-select">
        <option value="Yandexmap">Яндекс карты</option>
        <option value="app_store">App Store</option>
        <option value="google_play">Google Play</option>
        <option value="thor-tuning.com">thor-tuning.com</option>
    </select>
</form>

Mauer

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Donnell