align two words in a select option

Question

I have the select below:

<select name="mySelect">
   <option value="1">hello [test]</option>
   <option value="2">hello2 [test2]</option>
   <option value="3">hello33 [test33]</option>
   <option value="4">hel [hel]</option>
</select>

How can I align the text inside the options to appear like this:

hello____[test]

hello2___[test2]

hello33__[test33]

hel_____ [hel]

I tried adding spaces with JavaScript but they are not visible. ( _ is space char above)

Answer 1

The only way to do this would be to firstly set your select element to use a monospace font (that is a font whose characters all have the same width), then to pad out your element with the   character entity:

select {
  font-family: monospace;
}

<select name="mySelect">
  <option value="1">hello&nbsp;&nbsp;&nbsp;[test]</option>
  <option value="2">hello2&nbsp;&nbsp;[test2]</option>
  <option value="3">hello33&nbsp;[test33]</option>
  <option value="4">hel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[hel]</option>
</select>

As you can see this does make your markup quite ugly. It also forces you to use a font which probably isn't used site-wide and may be undesirable. I believe this is the only way you can accurately achieve this though, without replacing your select element completely with some JavaScript-controlled element strucutre.

---

Depending on what your hello or [test] texts are supposed to represent, the optgroup element may be what you're looking for:

<select name="mySelect">
  <optgroup label="[test]">
      <option value="1">hello</option>
  </optgroup>
  <optgroup label="[test2]">
    <option value="2">hello2</option>
  </optgroup>
  <optgroup label="[test33]">
    <option value="3">hello33</option>
  </optgroup>
  <optgroup label="[hel]">
    <option value="4">hel</option>
  </optgroup>
</select>