How to add text-align: right on select and options elements with HTML?

Spread the love

To add text-align: right on select and options elements with HTML, we set the direction and text-align-last properties.

For instance, we write

<select>
  <option>The first option</option>
  <option>A second, fairly long option</option>
  <option>Last</option>
</select>

to add the select drop down.

Then we write

select {
  text-align-last: right;
}
option {
  direction: rtl;
}

to align the text to the right with text-align-last: right;.

And we set the text direction to right to left with direction: rtl;.