tailwindcss-rtl
tailwindcss-rtl copied to clipboard
Fix to make select dropdown arrow show on left side when using tailwindcss-forms
I ran into an issue with making the arrow for the select dropdown show on the left side of the box with for rtl languages. This is an issue specific to the tailwindcss-forms plugin as it adds in the arrow as a background image.
![Tailwind_Select_Box_nofix](https://user-images.githubusercontent.com/92231/103719125-5c782b00-4f96-11eb-9266-f2482fef027d.png)
Not sure if tailwindcss-rtl is the right place for this but here is the quick fix I made.
[dir="rtl"] select {
background-position: left 0.5rem center;
padding-left: 2.5rem;
}
![Tailwind_Select_Box_rtl](https://user-images.githubusercontent.com/92231/103719194-7d408080-4f96-11eb-8e8c-f6e762057ba5.png)
Adding these lines works fine
@20lives consider adding this
[dir="rtl"] .form-select {
background-position: left 0.5rem center;
}
/* For those who use it direct */
[dir="rtl"] select {
background-position: left 0.5rem center;
}