Select with partial text align at right

Question

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 to pull "(vertical)" to right. Is there any way to do that?

<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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="455">Abaete&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="456">Acapulco&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="457">Aconcagua&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="458">Acqua&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="459">Acqua Di Firenze&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="460">Acquamarine&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="461">Acre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="462">Adalberto Lima&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="463">Adamatti&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1833">Adriático&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="464">Agata&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1106">Aguas Claras&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1144">Agueda&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="465">Aimore&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="466">Alamo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1864">Albatroz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1720">Alê&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="467">Alexandre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
</select>

UPDATE: This question is not duplicated, because I'm not trying to align full code to right, or add some style to select. I'm trying to align part of the text to left and other part to right.

Not that I know of, I think going with a custom select box is your only option — Jonas Grumann, Jun 21 '18 at 13:50

Temani Afif · Answer 1 · 2018-06-21T14:31:51.760

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>

edited Jun 21 '18 at 14:31

answered Jun 21 '18 at 13:44

Temani Afif

245,468
26
309
415

What if I have "More than one word (vertical)" ? – Marcelo Agimóvel Jun 21 '18 at 14:21
@MarceloAgimóvel you adjust, as you can see the visual you get in the code is the same you will get in your page ;) so this is easier than adding many ` ` and you don't know exactly how many .. so this method make it easier for you – Temani Afif Jun 21 '18 at 14:29
@MarceloAgimóvel check the update – Temani Afif Jun 21 '18 at 14:32
This isn't a trusted solution, since this element is mostly natively styled, so in MacOS u see: https://image.ibb.co/cvkAQT/Screen_Shot_2018_06_21_at_18_14_58_1.png – Eliya Cohen Jun 21 '18 at 15:19
@EliyaCohen it's not a trusted solution, it's a trick ;) – Temani Afif Jun 21 '18 at 15:37
That was close... I'll try another way. Thank's for your efford Temani and your warning Eliya. – Marcelo Agimóvel Jun 21 '18 at 17:46

Eliya Cohen · Answer 2 · 2018-06-21T15:23:53.310

1

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:

edited Jun 21 '18 at 15:23

answered Jun 21 '18 at 13:50

Eliya Cohen

10,716
13
59
116

Select with partial text align at right

2 Answers2

Linked