tailwindcss-rtl icon indicating copy to clipboard operation
tailwindcss-rtl copied to clipboard

Fix to make select dropdown arrow show on left side when using tailwindcss-forms

Open mattlangeman opened this issue 3 years ago • 1 comments

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

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

mattlangeman avatar Jan 06 '21 01:01 mattlangeman

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

yc-codes avatar Aug 04 '21 10:08 yc-codes