CSS align part of select text to the right

Question

This is what my HTML looks like:

<select>
  <option>Long name <span>P1</span></option>
  <option>Peter <span>P2</span></option>
  <option>Hugo <span>K4</span></option>
</select>

I would like to display select options like this:

Longname             P1
Petr                 P2
Hugo                 K4

codes (P1, P2, P4) aligned to the right side of select, conditions - I don't know length of longest name and I would prefer not to set exact width to any part of text

Answer 1

http://jsfiddle.net/Tobsta/Lpb092gd/2/

CSS styled <ul> with a function that sends its selected value to a display: none; <select>

Answer 2

Option elements cannot have any child elements.. so what you're doing is not going to work. I recommend using https://select2.github.io/ to replace your select box if you want more functionality.

Answer 3

Technically you can use a html entity -   - non-breaking space ^{msdn, wiki}. This is very, very wrong - first every option element must have the same number of characters and also it works correctly only if the font is monospaced ^wiki.

So, yes, you must use a custom select box. There are a lot, just a little search is needed.

This, jsfiddle.net/ha4p1440, is working in chrome, but in other browsers is misaligned.

<select>
   <option>Long name P1</option>
   <option>Peter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;P2</option>
   <option>Hugo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;K4</option>
</select>

Here, jsfiddle.net/ha4p1440/1, the font is set to 'Courier' and it should look the same in every browser (I've tried it in IE9).

select {
    font-family: 'Courier',serif;
}

Answer 4

Might not be the exact solution, but a possibility: If you use bootstrap, you can add a tooltip to option.

<select>
  <option title="P1" data-toggle="tooltip" data-placement="bottom">Long name</option>
</select>

Answer 5

<select>
  <option>
    <span style="float: left">Long name </span>
    <span style="float: right">P1</span>
  </option>
</select>