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;
}

<selectname="IM_COD_CONDOMINIO"id="IM_COD_CONDOMINIO"class="form-control "><optionvalue="add">Inserir novo</option><optionvalue="">Selecione</option><optionvalue="822">2000               (vertical)</option><optionvalue="455">Abaete             (vertical)</option><optionvalue="456">Acapulco           (vertical)</option><optionvalue="456">Acapulcol          (vertical)</option><optionvalue="456">A                  (vertical)</option><optionvalue="456">BB                 (vertical)</option><optionvalue="456">CCC                (vertical)</option><optionvalue="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/