Have you ever tried to text-align a select element? Safari is not a fan (no support). The answer to this question has eluded me and seemingly the internet - so here we are with a solution.

Quick Answer

direction: rtl;
Code Pen Example

Let's start with a simple example. It is important to note that the width of a select element will be as wide as its longest option.

HTML

<select> <option>1</option> <option>10</option> <option>100</option> <option>1,000</option> </select> 

CSS

select { -webkit-appearance: none; /* turn off drop-down arrow*/ -moz-appearance: none; border: solid 1px grey; font-size: 1rem; padding: 5px; /* direction: rtl; */ } 

Styling 💅

The above styling for the input isn't necessary; presumably you would only pursue this article if you are making a custom input element though so why not pretty it up?

The Fix 🙌

Uncommenting the last line direction: rtl; will move the text inside the element to the left. In Chrome you could simply use text-align: left; however this will not work in Safari.

Bonus 🤌

Change Direction While Selecting Option

A simple line can be added to change the options alignment; essentially the text that will show when we are making a selection. To do this we can add:

.select:active { direction: ltr; }