Select input form caret wrong position on RTL mode

Open Beginner friendly
#43,327 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@adityajai119 is already working on this.

Since Nov 9, 2026.

  • #43330 by @adityajai119 — open

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

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

bug confirmed css v6
Prerequisites
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

Image
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

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap

All issues in twbs/bootstrap

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.