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;
}
Top comments (1)
Super clever and easy fix for my issue. Thank you!