Text-Align Select (Safari Fix)

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

Comments

[JS Bits Bill]

Super clever and easy fix for my issue. Thank you!