Search code examples
htmlcssdropdown

Align some part of string in Option tag

I would like to make groups of the text content of an <option /> tag. Say I have the following: 

<select>
  <option>CCB - AFHT Crew Balancing</option>
  <option>WFM - Force Majere</option>
  ....
  ....
  <option>WWW - Adjacent TRK Form B</option>
  <option>MAH - Air Hose Separation</option>
  ....
  ....
  <option>IIS - Chassis Shortage RR</option>
  <option>WFL - Flooding</option>               
</select>

In UI, the dropdown displaying like this ↓ ,      but I have to display like this ↓

             enter image description here  enter image description here

I was thinking of doing something like

<option><span style="width:30px;">CCB</span><span>- AFHT Crew Balancing</span></option>

But It is not working because Options tag won't allow any other sub tags.

Solution

  • Use a monospace font so every character has the same width:

    <select style="font-family:'Courier New'">
  <option>CCB - AFHT Crew Balancing</option>
  <option>WFM - Force Majere</option>
  <option>WWW - Adjacent TRK Form B</option>
  <option>MAH - Air Hose Separation</option>
  <option>IIS - Chassis Shortage RR</option>
  <option>WFL - Flooding</option>               
</select>

    JSFiddle