Select With Partial Text Align At Right

I wonder if there's any way to align part of option's text to the right. Bellow you can see that I have a select with some names to the left and the '(vertical)' at right. I need t

Solution 1:

A trick is to use an invisible space that will not collapse and make the font-family:monospace:

option {
  font-family:monospace;
}

<select name="IM_COD_CONDOMINIO" id="IM_COD_CONDOMINIO" class="form-control ">
  <option value="add">Inserir novo</option>
  <option value="">Selecione</option>
  <option value="822">2000               (vertical)</option>
  <option value="455">Abaete             (vertical)</option>
  <option value="456">Acapulco           (vertical)</option>
  <option value="456">Acapulcol          (vertical)</option>
  <option value="456">A                  (vertical)</option>
  <option value="456">BB                 (vertical)</option>
  <option value="456">CCC                (vertical)</option>
  <option value="456">very looooong word (vertical)</option>
</select>

Solution 2:

Unfortunately, no.

The option element is styled natively to the platform you are using. Take a look at this question: How to style a select tag's option element?

A workaround is to use a library that creates a select-like element and hide the real one so you can have more control over it:

• Select2
• Selectize.js
• https://github.hubspot.com/select/docs/welcome/