Select input form caret wrong position on RTL mode
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 65/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- css, sass, scss
- Domain
- accessibility, frontend
Research direction
The issue identifies the select caret background image and its background-position in CSS as the source. Read the select input styles and how Bootstrap handles RTL styles, then reproduce the RTL caret overlap with the linked CodePen. Done means the caret no longer overlaps text and appears correctly positioned in RTL; the issue does not name a test file.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
The caret on the select input form is in the wrong position (right side), and it overlaps the text, when the text direction is RTL.
The caret for the select box is a background image, and it is being positioned using background-position CSS property, but this property does not support logical property values, so not sure how this issue would be addressed beside moving the CSS var that deals with it into actual code, and adding RTL CSS selector inverse the caret's position.
Reduced test cases
https://codepen.io/editor/pricop/pen/01a1bcfb-3e14-72bc-a687-2cc926a75a5e
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS, Linux
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox, Microsoft Edge, Opera
What version of Bootstrap are you using?
v6
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.7k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 103
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from twbs/bootstrap
-
v6: OTP input keeps the rest of a selection when you type over itPossibly taken @thejesh23 claimed this 1 day ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
twbs/bootstrap#43323 · 2 comments ·
Maintainers usually reply within 1 day
-
v6: Strength ignores common symbols as special charactersPossibly taken @thejesh23 claimed this 1 day ago. Openbug confirmed docs has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
twbs/bootstrap#43322 · 1 comment ·
Maintainers usually reply within 1 day
-
v6 alpha - hover-lift effect on menu dropdown only works when mouse is over the buttonPossibly taken @Aryan9891 claimed this 5 days ago. Openbug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 1 day
-
Dialog closes when a file input inside it has its picker cancelledPossibly taken @samyferhat claimed this 5 days ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
twbs/bootstrap#43278 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
-
docs js on-hold v6
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
Similar issues
-
accessibility good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 2 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
LibreChat-AI/LibreChat#17957 ·
Maintainers usually reply within 1 day
-
Detail sidebar collapse drops keyboard focusPossibly taken @GYJ99 claimed this today. Openproject#dify
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
langgenius/dify#45934 · 2 comments · 1 reaction ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
Maintainers usually reply within 1 day